HTML5 Web Components技术如何自定义元素？
<!DOCTYPE html>
<html>
<head>
<title>自定义元素示例</title>
<script>
class MyElement extends HTMLElement {
constructor() {
super(); // 必须在构造函数中调用super()
// 创建shadow DOM
const shadow = this.attachShadow({mode: 'open'});
// 创建元素内容
const p = document.createElement('p');
p.textContent = '这是一个自定义元素!';
// 将创建的内容插入shadow DOM
shadow.appendChild(p);
}
}
// 定义'my-element'自定义元素
customElements.define('my-element', MyElement);
</script>
</head>
<body>
<!-- 使用自定义元素 -->
<my-element></my-element>
</body>
</html>这段代码定义了一个名为my-element的自定义元素，它在shadow DOM中包含一个<p>元素。当页面加载时，customElements.define函数会注册这个新的自定义元素，之后就可以在HTML文档中像使用普通HTML元素一样使用<my-element></my-element>。
评论已关闭