自定义html标签 继承,HTML DOM customElements define()用法及代码示例

的customElementsdefine()方法用于定义新的自定义元素。可以创建两种类型的定制元素：

自治的自定义元素：这些元素不继承自内置 HTML元素。

自定义的内置元素：这些元素继承自内置 HTML元素。

用法:

customElements.define( name, constructor, options );

参数：

name:它指定新的自定义元素的名称。自定义元素的名称必须包含连字符。

constructor:它为新的自定义元素指定构造函数。

options:它指定控制如何定义元素的对象。它是一个可选参数。

返回值：此方法返回void。

例：在此示例中，使用此方法定义了名为的自定义元素，并使用名为CustomEl的构造函数。

HTML

GeeksforGeeks

HTML | customElements define() method

click here

var arr =

document.getElementById("arr");

// Function to define the element

function Geeks() {

class CustomEl extends HTMLElement {

constructor() {

super();

this.attachShadow({ mode:'open' });

this.shadowRoot.innerHTML = `

GeeksforGeeks Custom

Element Data

`;

}

}

// Use the define() method to define

// a new element

window.customElements.define(

'gfg-custom-element', CustomEl);

}

输出：

单击按钮之前：

单击按钮后：

支持的浏览器：

谷歌浏览器66.0

边79.0

Firefox 63.0

Safari 10.1

Opera 53.0