is属性不影响CSS层叠规则，因其仅用于Custom Elements升级判定，不参与样式计算；CSS引擎只识别标签名、class等显式因子，button[is="my-btn"]与button权重完全等价。
直接加 is 属性不会改变 CSS 层叠顺序，也不会自动触发样式重算；它只在 Custom Elements 注册后影响元素类型，对选择器权重、@layer 顺序、:root 变量作用域完全无干涉。
为什么 is 不影响现有 CSS 层叠规则
is 是 HTML 全局属性，但浏览器解析时仅用于 Customized Built-in Elements 的“升级判定”，不参与样式计算流程。CSS 引擎根本不知道这个属性存在——它只认标签名、class、id、属性选择器等显式参与层叠的因子。
-
button[is="my-btn"]和button在选择器权重上完全等价（都是 type selector + attribute selector），不会因为is值不同而提升优先级 -
@layer分组不受is影响：即使<button is="my-btn"></button>被升级为自定义类实例，它的样式仍按原始标签名button匹配@layer base中的规则 -
:root变量、inherit链、!important行为全部维持原样，is不引入任何新继承路径或作用域边界
is 升级后，CSS 该怎么写才不破防
升级后的元素仍是原生标签实例（如 HTMLButtonElement），所以 CSS 必须继续面向宿主标签编写，不能依赖自定义标签名。
- 正确写法：
button[is="my-btn"] { ... }或button.my-btn { ... }—— 显式靠属性或 class 区分，不假设浏览器会把is当成新标签 - 错误写法：
my-btn { ... }（这是 autonomous element 的写法，和is无关）或[is="my-btn"] { ... }（太宽泛，可能误中其他标签） - 若需复用样式逻辑，用
class桥接：<button is="my-btn" class="btn btn--primary"></button>，CSS 写.btn { ... }，与is解耦
和 @layer 共存时最容易踩的坑
@layer 管的是“样式声明顺序”，is 管的是“元素构造时机”，两者运行在不同阶段。混用时最常出问题的是加载时序错位。
立即学习“前端免费学习笔记（深入）”；
- 如果
customElements.define("my-btn", MyBtn, { extends: "button" })在 CSS@layer加载之后才执行，<button is="my-btn"></button>初始渲染会 fallback 成普通button，此时匹配的是@layer base规则；升级完成后样式不会自动重算，除非你手动触发el.classList.add("force-restyle")并在 CSS 中写button[is="my-btn"].force-restyle { ... } - 不要在
@layer components里写button[is] { ... }这种通配——它会污染所有带is的元素（包括 Vue 的:is编译残留），应精确限定值：button[is="my-btn"], button[is="my-card"] { ... } -
@layer内部无法感知元素是否已 upgrade，所以别指望@layer components { :host { ... } }这种写法生效——:host只对 shadow DOM 有效，is升级不创建 shadow root
真正关键的不是 is 值本身，而是注册时机是否早于 HTML 解析，以及 CSS 是否始终面向宿主标签而非幻想中的“新语义”。一旦把 is 当成样式开关，就等于在层叠体系外另起炉灶，结果只会是 selector 失效、变量未注入、@layer 分组被绕过。
