HTML中如何使用Web Components自定义元素

HTML中如何使用Web Components自定义元素

想在HTML里直接使用Web Components自定义元素？当然可以，但得先满足三个硬性前提，缺一不可：你的类必须继承自HTMLElement、必须调用customElements.define()完成注册，并且标签名里必须包含一个连字符（比如my-button）。如果其中任何一条没做到，浏览器就会把它当作一个没有行为的“未知标签”来处理，你的组件也就白写了。

自定义标签名必须带连字符

这是浏览器区分原生元素和自定义元素的硬性规则。写成button-x是合法的，但写成buttonx或者ButtonX，浏览器会直接忽略，并在控制台报错：Failed to execute 'define' on 'CustomElementRegistry': The name must contain a hyphen。

• 注册格式：传给define方法的字符串必须全小写且包含连字符，例如customElements.define('user-profile-card', UserProfileCard)。
• 使用一致：在HTML中使用时，标签名必须和注册时完全一致，比如，这里大小写是敏感的。
• 避开保留字：像class、for、slot这类保留字，即使加上连字符也不能用。

注册必须在元素被解析前完成

这里有个常见的“坑”：如果这个标签在HTML中被解析时，对应的customElements.define()还没执行，那么这个元素就会被标记为“未定义”。它虽然会出现在DOM树里，但不会触发constructor或connectedCallback等生命周期回调，而且事后也无法补救。

• 稳妥的做法：将包含define的