假設我有帶有影子根的 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 插槽中的巢狀子層級
customElements.define("my-element",class extends HTMLElement{ constructor(){ super().attachShadow({mode:"open"}).innerHTML = `萬一它會對某人有幫助：我用
div包裝了我的元素，添加了ref然後去了const Shadow = ref.current.querySelector('my-element').shadowRoot#const target = Shadow?.querySelector('.need-target-this')
#target.style.whatever = '值';