html自定义标签

<!-- 自定义标签示例 -->
<my-custom-element>
    <h1>这是一个自定义标签</h1>
    <p>你可以在这里放置任何你想要的内容。</p>
</my-custom-element>

<script>
    // 定义一个自定义元素
    class MyCustomElement extends HTMLElement {
        connectedCallback() {
            // 当元素被添加到DOM时调用
            this.innerHTML = `
                <style>
                    h1 { color: blue; }
                    p { color: green; }
                </style>
                <h1>这是通过JavaScript插入的标题</h1>
                <p>这是通过JavaScript插入的段落。</p>
            `;
        }
    }

    // 注册自定义元素
    customElements.define('my-custom-element', MyCustomElement);
</script>

解释说明：

1. HTML部分:

   • 使用 <my-custom-element> 作为自定义标签。
   • 在标签内部可以放置任何你想要的内容，但这些内容会在 connectedCallback 中被替换。

2. JavaScript部分:

   • 创建一个名为 MyCustomElement 的类，继承自 HTMLElement。
   • 在 connectedCallback 方法中定义了当元素被添加到 DOM 时的行为，这里我们通过 JavaScript 动态插入了一些 HTML 内容和样式。
   • 使用 customElements.define 方法将自定义标签 my-custom-element 和类 MyCustomElement 关联起来。

这样，当你在 HTML 中使用 <my-custom-element> 标签时，它会自动应用你定义的结构和样式。