HTML全局属性在Web Component中默认不隔离也不透传至Shadow DOM，仅作用于宿主元素；需手动读取并在connectedCallback等钩子中注入内部节点。
HTML 全局属性（如 id、class、data-* 、aria-* ）在 Web Component 中默认不隔离，也不自动透传到 Shadow DOM 内部——它们只作用于自定义元素自身节点，不会“掉进” shadowRoot 里。
全局属性不会自动进入 Shadow DOM
你写 <my-card id="user-123" data-theme="dark"></my-card>，这些属性确实会挂在 my-card 这个宿主元素上，但 this.shadowRoot.querySelector('[data-theme]') 一定查不到——因为 data-theme 并没被复制或继承进去。
- Shadow DOM 是样式和 DOM 的边界，不是属性的管道；它不自动转发宿主上的全局属性
-
id在 shadowRoot 内无效：外部document.getElementById('user-123')能拿到宿主元素，但宿主内部的<div id="content">不会和这个id冲突，也不会被外部getElementById捕获 -
class同理：宿主上的class="large"只影响宿主自身（比如用于 host 样式），对 shadowRoot 内部无任何作用
手动透传需要显式读取 + 注入
若组件逻辑依赖某个 data- 属性（比如根据 data-size 渲染不同尺寸），就得在 connectedCallback 或 attributeChangedCallback 里手动读取并写入 shadowRoot 内部节点：
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'data-size') {
const inner = this.shadowRoot.querySelector('.inner');
if (inner) inner.setAttribute('data-size', newValue);
}
}- 别用
this.setAttribute()去改宿主，那只是循环触发自己 - 优先用
data-而非id传递语义信息：id是 DOM 定位标识，重复即出错；data-可自由使用 - 透传
aria-属性时要格外小心：屏幕阅读器只读宿主节点上的aria-，除非你用aria-labelledby指向 shadow 内部 ID（但该 ID 必须在 shadowRoot 内唯一声明）
class 和 style 属性的特殊处理
class 和 style 是两个例外：它们会被浏览器自动映射到宿主元素，但依然不会穿透进 shadowRoot。不过你可以用 :host CSS 选择器响应它们：
立即学习“前端免费学习笔记（深入）”；
:host(.large) { --card-padding: 24px; }
:host[style*="color: red"] { --text-color: red; }-
:host(.large)能匹配宿主是否含large类，适合做外观变体 - 不要依赖
[style]属性选择器去判断内联样式——它只匹配字面量style="..."，不反映 JS 设置的element.style.color - 若需响应动态 class 变更，必须在
observedAttributes里声明class，并在attributeChangedCallback中手动同步逻辑（比如切换内部主题类）
容易被忽略的 aria-* 传递陷阱
很多开发者以为给宿主加 aria-label="用户卡片" 就够了，其实这仅让屏幕阅读器读出宿主节点的标签；如果内部有按钮、输入框等可交互节点，它们仍可能被单独聚焦并读出空名或错误名。
- 正确做法是：用
aria-labelledby或aria-describedby指向 shadowRoot 内部的<span id="label">，且该id必须在 shadowRoot 内存在 - 别把
aria-*直接设在<slot>上——slot 插入的内容属于 light DOM，其aria-属性由外部控制，组件无法保证一致性 - 最稳妥的是在 shadowRoot 内部渲染所有语义结构，把宿主的
aria-属性作为输入，再生成对应的内部标签节点
真正麻烦的从来不是“怎么传”，而是“传过去之后谁负责维护生命周期”——比如一个 data-user-id 透传进去了，用户后续 JS 修改了它，组件是否监听？是否重渲染？这些都得自己兜底，Web Components 不提供自动响应链。
