Attach a Shadow Root to a Custom Element

我们来看一个在做自定义元素时非常重要的决定，就是影子根的模式选择。 你得在两种模式里挑一个：开放模式，或者关闭模式。开发模式是咱们最常见的选择。为什么选它？因为开放模式允许外部JavaScript通过元素的shadowRoot属性直接访问影子树。这就好比你的组件有个透明的外壳，外面的人可以往里看，可以检查和测试里面的结构。这样一来，我们在写测试代码、调试工具，甚至是浏览器的开发者工具里，都可以很方便地查看组件的内部。在开放模式下，你可以直接在影子根上使用像appendChild、adoptedStyleSheets这样的标准Web API，操作起来很顺手。 而关闭模式呢，就不一样了。它会直接让element.shadowRoot返回空值，阻止外部代码访问。不过，这里有个重要的点要理解：关闭模式不是一种安全功能。它更像是一个声明：告诉别人，“这些内部细节是私有的，别依赖它们来写代码。” 比如，你可以在自定义元素的类里，用一个私有属性，像this._shadow，来保存对影子根的引用，这样组件内部照样可以操作自己的影子DOM，从生命周期回调里查询和更新。但外部就访问不到了。 那到底该怎么选呢？就一条简单的规则：看你想不想让外部代码能够检查组件内部。如果你想支持测试和调试，就用开放模式。如果你确实想表明这个组件的内部实现以后随时可能变化，不希望别人依赖它，那就可以用关闭模式。但大多数时候，我们都会选择开放模式，因为它更灵活、更方便。