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

【问题标题】：Define a web component inside another web component without polluting global namespace在不污染全局命名空间的情况下，在另一个 Web 组件中定义一个 Web 组件
【发布时间】：2019-09-08 06:56:45
【问题描述】：

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

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

【问题讨论】：

具有相同名称但行为不同的组件似乎是个坏主意。
@Ouroborus 它们就像同名的函数或同名的变量，不是吗？
是的，只有一个注册表，所以没有“内部组件”，也不允许重复名称。如果您查看 Youtube.com 源代码，他们会使用以下元素名称“解决”“问题”：<ytd-two-column-browse-results-renderer> 不优雅，也许未来会带来 Shadow-DOM 范围元素。
@Danny'365CSI'Engelman 太丑了 :( 以后有没有建议添加？
这不像iframe 每个组件都应该有一个用途和一个名称。如果您想拥有不同的功能，请创建另一个组件。我不想发现 <input> 或 <video> 标签在不同情况下的工作方式不同

标签： javascript web-component

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

<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>

【讨论】：