为何::part()对插槽中的Stencil元素不生效？

你遇到的样式不生效问题，核心逻辑是插槽分发的内容（也就是你写在<my-dropdown>标签内部的<select>）属于父页面的DOM上下文，而非<my-dropdown>组件内部的DOM结构，所以组件内部的样式表无法通过::part选中它。

两种正确的解决思路： #

• 思路一：在组件内部控制插槽元素样式
  组件内部要选中插槽里的元素，应该用:slotted()选择器，而不是::part。示例代码如下：

  /* 组件内部的CSS */
  /* 选中插槽里的所有select元素 */
  :slotted(select) {
    /* 你的样式规则 */
  }
  
  /* 精准选中带part="myselect"的select */
  :slotted(select[part="myselect"]) {
    /* 你的样式规则 */
  }
  

• 思路二：在父页面控制插槽元素样式
  如果你希望由父页面来定义这个<select>的样式，可以保留<select>上的part="myselect"，然后在父页面的CSS中编写样式：

  /* 父页面的CSS */
  my-dropdown::part(myselect) {
    /* 你的样式规则 */
  }
  

简单来说：::part是给父页面穿透组件内部样式用的，组件内部要处理插槽内容，得用:slotted()选择器，这俩的适用场景完全不同。

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