自定义元素无法直接通过HTML控制样式，需依赖JavaScript和CSS机制；内联样式在无Shadow DOM时有效，否则需在shadow root内操作或使用CSS变量穿透。
不能直接用 HTML 自定义元素（Custom Element）修改组件样式——它本身不提供样式控制能力，真正起作用的是你绑定的 JavaScript 逻辑和 CSS 机制。
自定义元素里改内联样式会失效吗
不会失效，但容易被覆盖。自定义元素（如 my-button）本质仍是普通 DOM 元素，element.style.color = "red" 能生效，前提是该元素没用 shadow DOM 封装，或你是在 shadow root 内部调用。
- 如果组件用了
attachShadow({ mode: 'closed' })，外部 JS 无法访问其内部节点，style直接设在宿主元素上（比如<my-button>）只影响宿主，不影响内部渲染 - 若用了
mode: 'open'，可通过el.shadowRoot.querySelector('button').style.backgroundColor = 'blue'修改内部元素 - 直接设
style在自定义标签上，仅对宿主元素生效（通常无视觉表现），除非你显式把宿主样式透传到内部，比如用:host { display: block; }
用 CSS 自定义属性（CSS vars）穿透 shadow DOM
这是最稳定、解耦最强的方式：把可变样式抽成 --bg-color 这类变量，在 shadow root 中声明并使用，再由外部通过 style 或 class 控制。
- 在自定义元素的
constructor或connectedCallback中，确保shadowRoot已存在，然后写入：this.shadowRoot.innerHTML = '<style>button { background-color: var(--bg-color, #007bff); }</style><button></button>' - 外部使用时：
<my-button style="--bg-color: #dc3545;"></my-button>，颜色立刻响应 - 注意：变量名必须带两个短横线前缀，且大小写敏感；
getComputedStyle(this).getPropertyValue('--bg-color')可读取当前值 - 不支持 IE，现代浏览器均 OK（Chrome 49+、Firefox 31+、Safari 9.1+）
classList 在自定义元素内部是否可靠
完全可靠，但得看操作位置：在 shadow root 内部调用 classList 是安全的；从外部调用则只影响宿主元素，对内部结构无感。
立即学习“前端免费学习笔记（深入）”；
- 推荐在自定义元素内部封装方法，比如
setVariant('primary')，内部执行this.shadowRoot.querySelector('button').classList.add('btn-primary') - 避免外部直接写
el.classList.add('large')——这只会给<my-button class="large">加类，若没在 :host 中做映射，毫无效果 - 若需外部 class 触发内部变化，可用
:host(.large) button { font-size: 18px; }这类宿主选择器
动态插入 <style> 到 shadowRoot 的坑
可以，但别漏掉 textContent 赋值后追加到 shadowRoot，否则样式不生效。
- 正确写法：
const style = document.createElement('style'); style.textContent = 'button { opacity: 0.8; }'; this.shadowRoot.appendChild(style); - 错误写法：只创建
style元素但没 append，或 append 到document.head（它对 shadow DOM 无效） - 多次插入相同规则会重复添加
<style>标签，建议先查重：if (!this.shadowRoot.querySelector('style[data-id="theme"]')) { ... } - 不要用
cssText（已废弃），用textContent更兼容
真正难的不是“怎么改”，而是决定样式责任落在哪一层：宿主？shadow root？还是全局 CSS？一旦混用，!important 和层叠顺序就会开始找你麻烦。
