如何实现ShadowRoot作用域的CustomElementRegistry避免自定义元素命名冲突？

目前标准的CustomElementRegistry是全局作用域的（挂载在window.customElements），没有原生支持针对单个ShadowRoot的独立注册表，但针对你开发浏览器插件时的命名冲突问题，有两种更可控的解决方案：

方案一：使用Scoped Custom Elements（Chrome 90+、Edge 90+支持） #

这是目前最优雅的隔离方案，允许你将自定义元素的作用域限定在特定ShadowRoot内部，不会污染全局注册表，也不会与宿主页面的同名元素冲突。

实现方式：

1. 创建一个作为容器的自定义元素，在其constructor中创建带有scopedCustomElements: true配置的ShadowRoot
2. 直接通过ShadowRoot的customElements对象注册内部自定义元素，这些元素仅在该ShadowRoot内生效

示例代码：

// 全局仅注册容器元素（名称唯一即可，冲突风险极低）
class PluginContainer extends HTMLElement {
  constructor() {
    super();
    // 创建启用作用域自定义元素的ShadowRoot
    const shadow = this.attachShadow({ 
      mode: 'open', 
      scopedCustomElements: true 
    });

    // 在该ShadowRoot的作用域内注册自定义元素
    shadow.customElements.define('x-my-element', class extends HTMLElement {
      connectedCallback() {
        this.textContent = 'Woo (仅在插件容器内生效)';
      }
    });

    // 在ShadowRoot内使用自定义元素
    shadow.innerHTML = '<x-my-element></x-my-element>';
  }
}

customElements.define('my-plugin-container', PluginContainer);

之后你只需要在页面中插入<my-plugin-container></my-plugin-container>，内部的x-my-element不会与宿主页面的任何元素冲突。

方案二：前缀/随机命名（兼容所有浏览器） #

如果需要兼容不支持Scoped Custom Elements的旧浏览器，可以采用你提到的随机命名方案，或者更可控的固定前缀命名：

• 在构建阶段给所有插件自定义元素名称添加唯一前缀（比如my-plugin-），变成my-plugin-x-my-element
• 或者通过构建脚本自动生成随机后缀（比如x-my-element-abc123），确保名称全局唯一

这种方式虽然没有彻底隔离作用域，但能有效避免命名冲突，是兼容性最强的备选方案。

内容的提问来源于stack exchange，提问作者Brad