HTML中Shadow DOM的:host伪类为组件宿主设置默认样式的方法-html教程-PHP中文网

:host伪类必须在shadow dom内部的中定义，仅对open模式有效，括号内需合法选择器，影响宿主自身样式但不控制内部布局，继承属性会漏入需主动重置。

html中shadow dom的:host伪类为组件宿主设置默认样式的方法

:host 伪类必须写在 Shadow DOM 内部的 `<style></style>` 中

外部 CSS 文件、里的 <style></style>、甚至组件 light DOM 中的内联 style 属性，都对 :host 无效。浏览器会静默忽略，不报错也不生效。

正确做法是在 attachShadow() 后，动态创建 <style></style> 并插入到 shadowRoot：

const shadow = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `
  :host {
    display: block;
    font-family: system-ui, sans-serif;
  }
`;
shadow.appendChild(style);

mode: 'open' 是必须的 —— mode: 'closed' 时 shadowRoot 不可访问，无法注入样式
不能用 shadow.innerHTML = '<style>...</style>...' —— 多数浏览器会忽略 <style></style> 标签内容，必须显式 appendChild
不要依赖 <link rel="stylesheet"> —— 它在 Shadow DOM 中不解析，除非用 adoptedStyleSheets（更重，且需手动管理）

:host() 函数括号里必须带合法选择器，空括号或字符串参数都不行

:host() 不是调用函数，而是接受一个完整的选择器作为参数。写成 :host()、:host("primary") 或 :host(primary) 全部无效，浏览器跳过整条规则，且无提示。

真正有效的写法只有：

:host([disabled]) —— 匹配宿主存在 disabled 属性（布尔属性推荐此写法）
:host([size="large"]) —— 属性值必须字面量完全一致（含大小写、引号）
:host(.primary) —— 匹配宿主元素 class 属性中包含 primary
:host(#my-btn) —— 匹配宿主 id 为 my-btn（极少用，语义弱）

注意：:host(.primary:hover) 合法，但 :host .header 表示“宿主自身满足 :host 条件，且其 Shadow DOM 内有 .header 后代”，不是穿透到 slot 投影内容。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

宿主类名或属性变更后，:host(.xxx) 不会自动响应，JS 需确保 DOM 已更新

:host(.variant) 只匹配当前真实存在于宿主元素 class 属性中的类名。JS 调用 element.classList.add('variant') 后，样式不会立即生效 —— 必须等该操作反映到 DOM 属性上，且浏览器完成样式计算。

避免在 constructor 中操作 class —— 此时 shadowRoot 尚未 attach，:host(.xxx) 还没机会参与匹配
推荐在 connectedCallback 或 attributeChangedCallback 中同步 class 和属性，例如：this.toggleAttribute('loading') → 对应 :host([loading])
若需监听外部 JS 动态加 class，可用 MutationObserver 监听 class 属性变化，而非依赖事件或定时器
Safari ≤15.4 对 :host(.xxx) 支持不稳定，上线前务必真机验证