• 使用<style>标记设置shadowDOM的样式在shadowDOM内
• 另见**：：第**部分：https://developer.mozilla.org/en-US/docs/Web/CSS/::part
• 另请参见：：：slotted CSS selector用于shadowDOM槽中的嵌套子级

customElements.define("my-element",class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"}).innerHTML = `
    <style>
      .target { background:hotpink; border: 5px dashed green }
      ::slotted(span) {
        color : red;
      }
    </style>
    <slot name="title"></slot>
    <span part="mytarget" class='target' />`;
  }
  connectedCallback(){
    this.shadowRoot.querySelector("span").innerHTML = `Web Component!`;
  }
});

<style>
  * { font: 42px Arial }
  span {
    background:gold; /* slot content styled by Global CSS! */
  }
  .target { border: 5px solid blue } /* does NOT style shadowDOM! */
  
  my-element::part(mytarget) {
    font-size: 150%;
  }
</style>

<my-element class="target"><span slot="title">Hello</span>

</my-element>

万一这对某人有帮助：我用div加上ref Package 了我的元素，然后
const shadow = ref.current.querySelector('my-element').shadowRoot
const target = shadow?.querySelector('.need-target-this')
target.style.whatever = 'value';