template标签内slotted元素外部CSS样式不生效如何解决

• <template>标签内的内容属于惰性文档片段，不会进入活动DOM树，常规CSS选择器无法直接匹配template内部元素；且模板被实例化渲染后，template标签本身会被从DOM树中移除，代码里的#element-details-template选择器本身就无法命中任何有效节点。
• 多层嵌套的选择器写法是SCSS预处理器的专属语法，原生CSS不支持这种嵌套规则，直接写在普通CSS文件中会被浏览器判定为无效规则，直接忽略不解析。
• 如果这是Lit/Web Component组件的模板，模板内容会被渲染到组件的Shadow DOM内部，全局外部CSS受Shadow DOM的样式隔离机制限制，默认无法穿透选中Shadow DOM内的元素。

根据你样式文件的位置选择对应写法：

1. 如果样式写在组件内部引入的button.scss中（该样式运行在Shadow DOM作用域内）
   • 若你使用SCSS预处理器，去掉无效的template选择器即可：

   :host {
     span.name {
       text-transform: lowercase;
     }
   }
   

   • 若写原生CSS，不要使用嵌套语法，直接写平级规则：

   :host span.name {
     text-transform: lowercase;
   }
   

2. 因为你代码里的span带slot属性，属于从组件外部传入的分发内容，如果要在组件样式中选中这类分发到slot的元素，需要用::slotted()伪类：

   :host ::slotted(span.name) {
     text-transform: lowercase;
   }
   

3. 如果你是要在组件外部的全局CSS中修改这个样式，默认无法穿透Shadow DOM，需要先给目标span添加part属性标记：

   <span class="name" part="button-sub-label" slot="buttonSubLabel">span2</span>
   

   之后在全局CSS中通过::part()伪类选中即可：

   lit-button::part(button-sub-label) {
     text-transform: lowercase;
   }
   

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