如何在沒有 JS 的情況下將影子根中的目標定位到類別？

Question

假設我有帶有影子根的 html 元素。

<my-element>
#shadow-root
<div class='need-target-this' />
</my-element>

如何將 div 定位到 Shadow root 內？

我嘗試過使用

:host(my-element.need-target-this)

但這並沒有幫助。我在這裡缺少什麼？

Answer 1

• 在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

Answer 2

萬一它會對某人有幫助：我用 div 包裝了我的元素，添加了 ref 然後去了

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

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

target.style.whatever = '值';

#