HTML中如何使用Web Components自定义元素
来源：互联网 2026-04-30 12:37:05HTML中如何使用Web Components自定义元素 想在HTML里直接使用Web Components自定义元素？当然可以，但得先满足三个硬性前提，缺一不可：你的类必须继承自HTMLElement、必须调用customElements.define()完成注册，并且标签名里必须包含一个连字符（
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这类保留字，即使加上连字符也不能用。
注册必须在元素被解析前完成
这里有个常见的“坑”：如果customElements.define()还没执行，那么这个元素就会被标记为“未定义”。它虽然会出现在DOM树里，但不会触发constructor或connectedCallback等生命周期回调，而且事后也无法补救。
- 稳妥的做法：将包含
define的