工程化问题

CSS 预处理器（Sass/Less）与后处理器（PostCSS）的异同点？

相同点：都是构建时生效而不是运行时生效，产出的都是标准 CSS 语法 不同点：

• 预处理器是提供扩展的语法（变量定义、mixin、函数等）
• 后处理器不改变语法，通过插件机制进行自动化处理（如：添加浏览器前缀、为所有 XX 标签添加特定属性）

如何避免 CSS 命名冲突？

• BEM 命名法：按照“模块-元素-状态”的层级拆分
• CSS 模块化：使用 CSS Module、css in js 等方式，为每个类生成哈希值
• 编码规范上：避免使用全局选择器

Shadow DOM 中的 CSS 隔离原理？

Shadow DOM 提供组件级私有 DOM 树，内部自动形成独立作用域，内外部默认隔离。

可以通过伪元素选择器实现内外互通：

• ::part 将内部元素暴露，可以在外部修改

<my-button>点击</my-button>

// Shadow DOM
const shadow = host.attachShadow({ mode: "open" });
shadow.innerHTML = `
  <style>
    button { padding: 10px; }
  </style>
  <button part="btn">按钮</button>
`;

/* 外部 CSS */
my-button::part(btn) {
  background-color: red;
}

• ::slotted

slot 是 Web Component 的语法，用于在自定义组件内部预留插槽位置。通过::slotted 可以修改slot 传入内容的样式

<!-- 内部定义 -->
<my-card>
  <p>外部内容</p>
  <span>其他内容</span>
</my-card>

<!-- 外部使用 -->
<my-card>
  <p>外部传入的内容</p>
</my-card>

const shadow = host.attachShadow({ mode: "open" });
shadow.innerHTML = `
  <style>
    ::slotted(p) {
      color: red;
    }
  </style>
  <slot></slot>
`;

::slotted(p) {
  color: red;
}