如何不使用JS定位Shadow Root内的类元素？

你的选择器完全用错了，具体问题和解决方法如下：

为什么你的选择器不生效 #

:host() 是Shadow DOM内部专用的选择器，作用是选中<my-element>这个宿主元素本身，而非它内部的div。而且.need-target-this是内部div的类，不是宿主的类，这个选择器根本匹配不到目标元素。

正确的定位方式分两种场景 #

场景1：在Shadow DOM内部的样式表中定位 #

直接用类选择器就能选中内部div，因为Shadow内部的样式可以直接访问内部元素：

.need-target-this {
  /* 你的样式规则 */
}

如果需要结合宿主的状态控制内部div（比如宿主有某个类时改变div样式），可以用:host()结合后代选择器：

/* 当<my-element>带有active类时，内部的need-target-this div生效样式 */
:host(.active) .need-target-this {
  background-color: red;
}

场景2：在主DOM（Shadow外部）定位 #

首先要求Shadow Root是开放模式（创建时指定mode: 'open'，如果是closed模式，外部无法访问内部元素）。

用JavaScript获取元素

通过宿主元素的shadowRoot属性访问内部DOM：

const myEl = document.querySelector('my-element');
const targetDiv = myEl.shadowRoot.querySelector('.need-target-this');

用CSS控制样式

外部CSS默认无法穿透Shadow DOM，需要让自定义元素内部暴露可被外部控制的部分：
先在Shadow内部给div添加part属性：

<div class='need-target-this' part="target-div"></div>

然后外部CSS用::part()选择器定位：

my-element::part(target-div) {
  /* 你的样式规则 */
}

内容的提问来源于stack exchange，提问作者kkkkkkkkkkkkkkkkk