Wie kann man ohne JS eine Klasse im Schattenstamm anvisieren?

Question

Nehmen wir an, ich habe ein HTML-Element mit Schattenstamm. #shadow-rootWie positioniere ich das Div innerhalb von Shadowroot? Ich habe versucht, :host(my-element.need-target-this) zu verwenden, aber das hat nicht geholfen. Was fehlt mir hier?

P粉521013123 · Answer

在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

P粉232793765 · Answer

万一它会对某人有所帮助：我用 div 包装了我的元素，添加了 ref 然后去了

const Shadow = ref.current.querySelector('my-element').shadowRoot

const target = Shadow?.querySelector('.need-target-this')

target.style.whatever = '值';