自定义元素Shadow DOM中CSS自定义变量IDE与浏览器无法识别问题

安全阿岳

2026-10-7

问题核心原因

你的代码不生效是由两个语法和选择器使用错误导致的：

非法CSS注释：CSS仅支持/* 注释内容 */格式的注释，你使用的//是JavaScript的单行注释语法，不属于CSS合法语法，会导致该行的自定义属性定义直接解析失败，IDE的波浪线提示也是识别到了该非法语法。
选择器使用错误：Shadow DOM内部样式中的:root选择器匹配的是全局文档的<html>根元素，不会绑定到当前自定义元素的Shadow DOM作用域，因此定义的自定义属性无法被Shadow DOM内部的元素继承访问。

修复方案

将//注释替换为CSS标准注释，同时将:root替换为Shadow DOM专属的:host选择器（匹配当前自定义元素宿主），修复后代码如下：

function tpl(raw){
  const template = document.createElement('template');
  template.innerHTML = raw;
  return template;
}

const templateNode = tpl`
  <style>
  :host {
    --default-text-color: red;  /* 改为CSS标准注释 */
  }
  
  p { color: var(--default-text-color); } 
  </style>

  <p>Test</p>
`

class MyElement extends HTMLElement {
  constructor() {
    super();
    const sd = this.attachShadow({ mode: 'open' });
    sd.appendChild(templateNode.content.cloneNode(true))
  }

  connectedCallback(){
    console.log('my-element connected')
  }
}

customElements.define('my-element', MyElement)