CSS 自定义元素和阴影中的自定义变量 dom 未被 IDE 或浏览器解析

Question

我一直在尝试在自定义元素中使用 CSS 自定义属性，如下所示：

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

const templateNode = tpl`
  <style>
  :root {
    --default-text-color: red;  // IDE squiggles
  }
  
  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)

自定义属性: --default-text-color 似乎无法被 IDE 识别，并且未被浏览器解析。

所以显然我遗漏了一些关于为什么上面的代码不应该工作的关键信息。谁能解释一下？

注意。我知道 Constructable StyleSheets 及其 adoptedStyleSheets 成员，但目前它似乎只是一个提议的解决方案，尚未得到所有浏览器的完全支持。我希望找到一种适用于所有支持 css 自定义属性和自定义元素的浏览器的解决方案。

Answer 1

正如 Myf 在评论中提到的，您使用 :root 而不是 :host 是您的问题。

您可以在文档级别（或任何 CSS 选择器）使用 :root，
因为 CSS 属性级联到 shadowDOM 中。

（无关）你也使代码过于复杂；但不能怪你，
所有博客甚至 MDN 文档都显示臃肿的代码

  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super()  // sets AND returns 'this' scope
        .attachShadow({mode:'open'})  // sets AND returns 'this.shadowRoot'
        .innerHTML = `
<style>
  :host{--textcolor: green}
  p { color: var(--textcolor,red); background: var(--bgcolor,grey) } 
</style>
<p>Hello Web Component</p>`
    }
  })

<style>
  :root{
    --bgcolor:lightgreen;
  }
</style>

<my-element></my-element>

CSS 自定义元素和阴影中的自定义变量 dom 未被 IDE 或浏览器解析

CSS Custom variables in custom element and shadow dom not resolved by IDE or browser

css

web-component

shadow-dom

css-variables

custom-element