Supposons que j'ai un élément HTML avec une racine fant?me.
<my-element> #shadow-root <div class='need-target-this' /> </my-element>
Comment positionner div dans la racine Shadow ?
J'ai essayé d'utiliser
:host(my-element.need-target-this)
Mais ?a n’aide pas. Qu'est-ce que j'oublie ici?
Utilisez la balise à l'intérieur de shadowDOM pour définir le style de shadowDOM
Voir aussi ::part?: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
Voir aussi?: ?: :sélecteur CSS à emplacements pour les enfants imbriqués dans les emplacements ShadowDOM
customElements.define("my-element",class extends HTMLElement{ constructor(){ super().attachShadow({mode:"open"}).innerHTML = ``; } connectedCallback(){ this.shadowRoot.querySelector("span").innerHTML = `Web Component!`; } });
Hello
Au cas où cela aiderait quelqu'un?: j'ai utilisé div
包裝了我的元素,添加了 ref
et je suis allé à
const Shadow = ref.current.querySelector('my-element').shadowRoot
const target = Shadow?.querySelector('.need-target-this')
target.style.whatever = '值';