如何让Stencil.js中嵌套类定义的样式作用于插槽组件？

针对你拆分Navbar插槽组件后样式无法穿透的问题，这里提供几个可行的实践方案：

1. 通过Props传递父类样式类名 #

将Navbar中需要的嵌套样式类名（如navbar__container-left-content-navigation-item）作为props传给navbar-menu-item组件，让子组件在自身根元素上应用该类。这样原SCSS的嵌套规则就能直接匹配到子组件元素，无需修改原有700行样式代码。

示例代码：

• Navbar中使用插槽：

<navbar-menu-item 
  slot="left-menu-item"
  base-class="navbar__container-left-content-navigation-item"
></navbar-menu-item>

• navbar-menu-item组件模板：

<div :class="base-class">
  <!-- 菜单项内部内容 -->
</div>

2. 提取共享样式到公共SCSS文件 #

把Navbar中依赖的基础嵌套样式（响应式断点、布局规则等）提取到共享SCSS文件，用占位符或混合宏复用逻辑，避免重复复制代码。

示例：

• 共享文件_navbar-shared.scss：

%navbar-navigation-item-base {
  padding: 0.5rem 1rem;
  @include respond-to(sm) {
    padding: 0.75rem 1.25rem;
  }
  // 其他响应式和父类依赖的基础样式
}

• Navbar组件的SCSS：

@import './_navbar-shared.scss';
.navbar__container-left-content-navigation-item {
  @extend %navbar-navigation-item-base;
  // Navbar特有的额外样式
}

• navbar-menu-item组件的SCSS：

@import './_navbar-shared.scss';
.navbar-menu-item {
  @extend %navbar-navigation-item-base;
  // 子组件特有的样式
}

3. 框架专属深度选择器（Vue/React） #

如果使用Vue或React这类带样式隔离的框架，可通过深度选择器穿透到插槽子组件内部，直接复用原有样式：

• Vue3 使用:deep()：

.navbar__container-left {
  :deep(.navbar-menu-item) {
    @extend .navbar__container-left-content-navigation-item;
  }
}

• React（CSS Modules）使用:global()：

.navbar__container-left :global(.navbar-menu-item) {
  @extend .navbar__container-left-content-navigation-item;
}

4. Web Components 用::part伪元素 #

如果是Web Components开发，在navbar-menu-item内部元素添加part属性，再在Navbar中通过::part()选中目标元素：

• navbar-menu-item模板：

<div part="navigation-item">
  <!-- 菜单项内容 -->
</div>

• Navbar的SCSS：

& ::slotted([slot=left-menu-item])::part(navigation-item) {
  @extend .navbar__container-left-content-navigation-item;
}

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