js自定义一个html标签示例代码-html代码-BFW代码库

js自定义一个html标签示例代码

代码语言：html

所属分类：其他

代码描述：js自定义一个html标签示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background: black;
}
</style>


  
</head>

<body translate="no">
  <hr-circle size='90px' color='teal'></hr-circle>
<hr-circle size='70px' color='salmon'></hr-circle>
<hr-circle size='110px' color='orangered'></hr-circle>
  
      <script  >
// helper functions
function createSVGElements(...elems) {
  return elems.map(
  elem => document.createElementNS('http://www.w3.org/2000/svg', elem));

}

function setAttributes(elem, attribs) {
  for (const [key, value] of Object.entries(attribs)) {
    elem.setAttribute(key, value);
  }
}

function appendChildren(elem, ...children) {
  children.forEach(child => elem.appendChild(child));
}

// Create a class for the element
class CircleHR extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();
  }

  connectedCallback() {
    // Create a shadow root
    const shadow = this.attachShadow({ mode: 'open' });

    // Create line Break
    const hr = document.createElement('hr');

    // Create SVG elements
    const [svg, rect, circle, path] = createSVGElements('svg', 'rect', 'circle', 'path');

    setAttributes(svg, {
      'viewBo.........完整代码请登录后点击上方下载按钮下载查看