84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
假设我有带有影子根的 html 元素。
<my-element> #shadow-root <div class='need-target-this' /> </my-element>
如何将 div 定位到 Shadow root 内?
我尝试过使用
:host(my-element.need-target-this)
但这并没有帮助。我在这里缺少什么?
在shadowDOM内使用标签设置shadowDOM的样式
另请参阅::part:https://developer.mozilla.org/en-US/docs/Web/CSS/::part
另请参阅:: :slotted CSS 选择器,用于 ShadowDOM 插槽中的嵌套子级
customElements.define("my-element",class extends HTMLElement{ constructor(){ super().attachShadow({mode:"open"}).innerHTML = ` `; } connectedCallback(){ this.shadowRoot.querySelector("span").innerHTML = `Web Component!`; } });
Hello
万一它会对某人有所帮助:我用 div 包装了我的元素,添加了 ref 然后去了
div
ref
const Shadow = ref.current.querySelector('my-element').shadowRoot
const target = Shadow?.querySelector('.need-target-this')
target.style.whatever = '值';
在shadowDOM内使用
标签设置shadowDOM的样式
另请参阅::part:https://developer.mozilla.org/en-US/docs/Web/CSS/::part
另请参阅:: :slotted CSS 选择器,用于 ShadowDOM 插槽中的嵌套子级
万一它会对某人有所帮助:我用
div
包装了我的元素,添加了ref
然后去了const Shadow = ref.current.querySelector('my-element').shadowRoot
const target = Shadow?.querySelector('.need-target-this')
target.style.whatever = '值';