HTML 自定义元素名称的范围是什么？

Question

我正在学习 HTML Web 组件。我了解自定义元素是通过 window.customElements.define() 方法注册的。并且可以选择附加一个影子 DOM。

我的问题是，自定义元素是否共享一个全局范围，就像全局变量一样？对窗口对象的引用使它看起来如此。或者可以将它们限定为影子 DOM。

如果它是一个全局范围，如何避免自定义元素名称之间的冲突？说一个本地的<super-button> vs library 1's <super-button> vs library 2's <super-button>。感谢您的指导。

Answer 1

根据NotSupportedErrorin the docs的全局范围

CustomElementRegistry 已包含同名条目 或相同的构造函数（或已定义），或扩展 已指定并且它是有效的自定义元素名称，或者 extends 是 指定但它试图扩展的元素是未知的 元素。

避免冲突的最佳方法是练习命名空间 - 您的所有组件都将以 mycustomprefix-component-name 开头。

Naming web components 还建议使用命名空间。