使用CSS引用web组件根属性

Question

创建了一个带有阴影DOM的web组件。单击该按钮时，它会将open属性添加到web组件。

我想在CSS中显示隐藏的div，当open添加CSS样式时。阴影DOM样式是否可以引用web组件根目录上的属性？否则，我必须在阴影DOM中添加一个多余的类或属性。

​

class CustomComponent extends HTMLElement {
  constructor() {
    super();
    
    this.element = this.attachShadow({mode: 'open'});
  }
  
  static get observedAttributes() {
    return ['open'];  
  }
  
  attributeChangedCallback(attrName, oldValue, newValue) {
    if (newValue !== oldValue) {
      this[attrName] = this.hasAttribute(attrName);
    }
  }
  
  connectedCallback() {
    const template = document.getElementById('custom-component');
    const node = document.importNode(template.content, true);
    this.element.appendChild(node);
    
    this.element.querySelector('button').addEventListener('click', () => {
      this.setAttribute('open', '');
    });
  }
}

customElements.define('custom-component', CustomComponent);

<template id="custom-component">
  <style>
    div {
      display: none;
    }
    [open] div {
      display: block;
    }
  </style>
  <button>Open</button>
  <div>Content</div>
</template>

<custom-component></custom-component>

​

Answer 1

似乎host CSS伪选择器就是为处理这种精确的情况而设计的。

​

class CustomComponent extends HTMLElement {
  constructor() {
    super();
    
    this.element = this.attachShadow({mode: 'open'});
  }
  
  static get observedAttributes() {
    return ['open'];  
  }
  
  attributeChangedCallback(attrName, oldValue, newValue) {
    if (newValue !== oldValue) {
      this[attrName] = this.hasAttribute(attrName);
    }
  }
  
  connectedCallback() {
    const template = document.getElementById('custom-component');
    const node = document.importNode(template.content, true);
    this.element.appendChild(node);
    
    this.element.querySelector('button').addEventListener('click', () => {
      this.setAttribute('open', '');
    });
  }
}

customElements.define('custom-component', CustomComponent);

<template id="custom-component">
  <style>
    div {
      display: none;
    }
    :host([open]) div {
      display: block;
    }
  </style>
  <button>Open</button>
  <div>Content</div>
</template>

<custom-component></custom-component>

​