在 document.ready 上将子元素从 shadow dom 移动到 light dom答案

【问题标题】：Move a child element from shadow dom to light dom on document.ready在 document.ready 上将子元素从 shadow dom 移动到 light dom
【发布时间】：2021-11-05 22:17:07
【问题描述】：

我使用 web 组件定义了一个自定义元素：

<universal-form>
  <slot name="inner-input">
</universal-form>

这个自定义元素本身被放置在另一个 shadow dom 中：

<my-dashboard>
  #shadow-root
  <div id="shadow-container">
    <universal-form>
      ...
      <input type="datepicker" id="to-be-exposed" slot="inner-input"/>
    </universal-form>
  </div>
  ...
</my-dashboard>

** 注意：有些人可能会建议将<universal-form> 放在<my-dashboard> 的slot 中，而不是直接放在<my-dashboard> shadow-root 中，这条路线被排除在外，因为其他一些实现要求。

现在我希望能够从网页的 css 文件中设置 input#to-be-exposed 的样式，因此当文档准备就绪时，需要从 light dom 访问它。

实现这一目标的最佳做法是什么？

【问题讨论】：

只有<style> inside <universal-form> shadowRoot。如何以及何时创建它取决于您.. 或使用 CSS 属性、CSS ShadowParts 或 Constructable StyleSheets（目前仅在 Chromium 中支持）这里没有最佳实践；这完全取决于您想要什么/为什么/何时/如何。
+1 特别是使用 Shadow Parts，如果您只想完全访问阴影根内的内部节点样式，那么仅使用 CSS 比尝试在 JS 中移动节点更容易

标签： web-component shadow-dom custom-element

【解决方案1】：

在这种情况下，一个选项是从仪表板元素中删除 shadowDom，因为附加了阴影的元素不再有可见的 light dom。

元素不会介意，泄漏的东西正是你想要的，即来自父窗口的样式。

实现很简单，而是将元素附加到附加的阴影中，将它们直接附加到元素中。

无影元素示例：

class MyElement extends HTMLElement {
   constructor(){
      super();
      this.innerHTML = `elements here`;
   }
}

【讨论】：

标准是否推荐这种无影方法？
没有标准可以规范可以放在一起的内容。自定义元素、Shadow DOM 和模板是独立的功能。一个人可以根据需要只使用一种或全部。
同样，这个建议的解决方案是一个选项，您可以使用开槽槽实现相同的效果。