如何通过HTML自定义元素进行样式隔离与封装-html教程-PHP中文网

不调用 attachshadow() 就没有样式隔离，custom elements 仅注册标签名，dom 落在 light dom 中，外部样式会直接穿透；必须在 constructor() 中调用 this.attachshadow({ mode: 'closed' }) 才能建立有效样式边界。

如何通过html自定义元素进行样式隔离与封装

不调用 `attachShadow()` 就没有样式隔离

Custom Elements 本身只是注册了一个标签名和类的映射，customElements.define() 不会自动创建任何样式边界。所有 DOM 节点仍落在 light DOM 中，外部 button { color: red } 或 .header { margin: 0 } 会直接穿透进来——命名再规范、加再多前缀也没用。

浏览器在样式计算阶段就跳过跨 boundary 匹配，这不是优先级问题，是根本“看不见”。!important、::ng-deep、/deep/ 全部失效，Chrome 120+ 和 Firefox 115+ 已彻底移除支持。

必须在 constructor() 或 connectedCallback() 中显式调用 this.attachShadow({ mode: 'open' })
mode: 'closed' 会让 el.shadowRoot 返回 null，DevTools 无法 inspect，日常开发强烈不推荐
漏掉这一步，后面所有样式写法（scoped、BEM、CSS Modules）都是徒劳

`shadowRoot.innerHTML = '<style>...</style>'` 是危险操作

字符串拼接方式注入 <style></style> 标签，会导致该 <style></style> 被当普通 HTML 解析，不进入 CSSOM，后续 JS 动态修改 textContent 或切换主题时样式不会更新。

正确做法是用标准 DOM 方法创建并插入：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const style = document.createElement('style');
style.textContent = `
  .btn { background: var(--primary, #007bff); }
  :host([disabled]) { opacity: 0.5; }
`;
shadowRoot.appendChild(style);

避免在 shadow 内写 body { color: red }——body 不是宿主，也不在作用域内，浏览器直接忽略整条规则
若需复用样式，可用 CSSStyleSheet 实例 + shadowRoot.adoptedStyleSheets = [sheet]（注意 Safari 16.4+、Chrome 73+ 才稳定支持）
外部 <link rel="stylesheet"> 对 shadow 内部完全无效，除非预解析后转为 CSSStyleSheet

`:host` 和 `::slotted()` 是唯一合法穿透出口

W3C 规范只允许这两个伪类跨 boundary 生效，其余全是单向封闭。想让外部有限影响组件，只能靠它们，且有明确能力边界。

:host([disabled]) 响应宿主自身属性；:host-context(.theme-dark) 响应祖先元素 class（如 <my-button></my-button>）
::slotted(p) 只匹配传入 <slot></slot> 的顶层 <p></p>，且仅支持可继承属性：color、font、line-height、background-color
::slotted(*) { margin: 16px } 无效——margin 不可继承，浏览器直接忽略
不要在 slot 外套 div 再加 class 控制样式，那是把样式责任甩给使用者；应在 shadow 内用 :host ::slotted(p) 主动约束

CSS 变量不是“穿透”，是继承链透入

--primary 这类自定义属性能进 shadow，是因为它沿 DOM 树从宿主自然继承，不是浏览器开了后门。变量必须挂在宿主或其祖先上才有效。

✅ 正确：<my-button style="--primary: #3b82f6;"></my-button> 或 <my-button class="theme-dark"></my-button> + .theme-dark { --primary: #1e1e1e; }
❌ 无效：<div class="wrapper"><my-button></my-button></div> + .wrapper { --primary: red; }——变量没挂到 host 上，进不去 shadow
消费时务必带 fallback：background-color: var(--primary, #007bff);，否则变量未定义会导致样式崩溃
基础字体、颜色默认会继承，但布局属性（margin、display）不会，需显式透传：:host { font-family: inherit; color: inherit; }