在不污染全局命名空间的情况下在另一个 Web 组件中定义一个 Web 组件

Question

假设我想使用一个在内部使用 10 个 web 组件的 web 组件，如果组件在全局定义它，Internals 会污染我的全局组件命名空间，我不能将它们的名称用于其他组件。

有没有办法在不通过 customElements.define() 定义的情况下在另一个 Web 组件中使用 Web 组件？

Answer 1

有一些关于创建 scoped custom element registries 的讨论，但没有任何规范或尚未实施。

Answer 2

scoped custom element registry 尚不支持，但您可以使用前缀名称，直到它被支持，例如，如果您的组件名称是 x-foo，您可以将您的组件命名为 x-foo-title，x-foo-image，等等。例如在 jb-input 中，开发人员使用这样的子 Web 组件：

<jb-input>
    <jb-input-inbox-element slot="end-section">
        <div>after</div>
    </jb-input-inbox-element>
    <jb-input-inbox-element slot="start-section">
        <div>before</div>
    </jb-input-inbox-element>
</jb-input>

在不污染全局命名空间的情况下在另一个 Web 组件中定义一个 Web 组件

Define a web component inside another web component without polluting global namespace

javascript

web-component