将子元素从阴影dom移到document.ready上的light dom
将子元素从阴影dom移到document.ready上的light dom
提问于 2021-09-09 08:42:09
我使用web组件定义了一个自定义元素：
<universal-form>
<slot name="inner-input">
</universal-form>此自定义元素本身被放置在另一个卷影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>的卷影根中，由于其他一些实现要求，该路由被排除在外。
现在我希望能够从网页的css文件中设置input#to-be-exposed的样式，所以当文档呈现准备就绪时，它需要能够从light dom访问。
实现这一目标的最佳实践是什么？
回答 1
Stack Overflow用户
发布于 2021-09-29 13:24:35
一种选择是将shadowDom从仪表板元素中删除，因为附加了阴影的元素不再具有可见的光dom。
元素不会介意的，泄漏进来的东西正是你想要的，也就是父窗口的样式。
实现很简单，而是将元素添加到附加的阴影中，将它们直接添加到元素中。
无阴影元素示例：
class MyElement extends HTMLElement {
constructor(){
super();
this.innerHTML = `elements here`;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69114945
复制相关文章
相似问题
腾讯云开发者
