如何限制闭合Shadow DOM仅允许特定外部宿主进行样式化？

针对你提出的需求——仅允许night-sky自定义元素统一设置内部star-item的闭合Shadow DOM样式，同时阻止外部修改——可以通过以下两种方案实现：

方案一：:host-context() + CSS变量传递（推荐） #

利用CSS的:host-context()伪类检测star-item是否处于night-sky内部，仅在满足条件时应用从父元素传递的样式变量，外部样式无法触发该条件。

1. 定义star-item自定义元素 #

class StarItem extends HTMLElement {
  constructor() {
    super();
    // 创建闭合Shadow DOM
    this.attachShadow({ mode: 'closed' });
    this.shadowRoot.innerHTML = `
      <style>
        /* 仅当star-item处于night-sky内部时，应用以下样式 */
        :host-context(night-sky) {
          position: absolute;
          width: var(--star-size, 8px);
          height: var(--star-size, 8px);
          background-image: var(--star-bg, url(star.png));
        }
      </style>
      <div class="star"></div>
    `;
  }
}
customElements.define('star-item', StarItem);

2. 定义night-sky自定义元素 #

在night-sky的Shadow DOM中统一设置CSS变量，传递给内部所有star-item：

class NightSky extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        /* 给内部所有star-item设置统一样式变量 */
        star-item {
          --star-size: 8px;
          --star-bg: url(star.png);
        }
        /* night-sky自身容器样式 */
        :host {
          display: block;
          width: 100%;
          height: 400px;
          position: relative;
          background-color: #000;
        }
      </style>
      <div id="stars-container"></div>
    `;

    // 批量生成star-item
    const container = this.shadowRoot.getElementById('stars-container');
    for (let i = 0; i < 200; i++) {
      const star = document.createElement('star-item');
      // 设置随机位置
      star.style.left = `${Math.random() * 100}%`;
      star.style.top = `${Math.random() * 100}%`;
      container.appendChild(star);
    }
  }
}
customElements.define('night-sky', NightSky);

原理：:host-context(night-sky)只会匹配被night-sky包含的star-item，外部的star-item不会触发该规则；同时star-item的Shadow DOM是闭合的，外部无法直接修改其内部样式，也无法通过全局CSS变量覆盖（因为变量仅在night-sky内部生效）。

方案二：属性传递+父元素校验 #

通过自定义属性传递样式配置，并在star-item内部校验父元素是否为night-sky，仅满足条件时应用样式。

1. 定义star-item自定义元素 #

class StarItem extends HTMLElement {
  static get observedAttributes() {
    return ['star-size', 'star-bg'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'closed' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          position: absolute;
          /* 默认样式，可被父元素覆盖 */
          width: 8px;
          height: 8px;
          background-image: url(star.png);
        }
      </style>
      <div class="star"></div>
    `;
    this.styleEl = this.shadowRoot.querySelector('style');
  }

  attributeChangedCallback(name, oldVal, newVal) {
    // 仅当父元素/祖先元素是night-sky时，才应用样式修改
    if (!this.closest('night-sky')) return;
    
    if (name === 'star-size') {
      this.styleEl.textContent += `:host { width: ${newVal}; height: ${newVal}; }`;
    } else if (name === 'star-bg') {
      this.styleEl.textContent += `:host { background-image: url(${newVal}); }`;
    }
  }
}
customElements.define('star-item', StarItem);

2. 定义night-sky自定义元素 #

class NightSky extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          height: 400px;
          position: relative;
          background-color: #000;
        }
      </style>
      <div id="stars-container"></div>
    `;

    const container = this.shadowRoot.getElementById('stars-container');
    const starSize = '8px';
    const starBg = 'star.png';
    
    for (let i = 0; i < 200; i++) {
      const star = document.createElement('star-item');
      // 传递样式属性
      star.setAttribute('star-size', starSize);
      star.setAttribute('star-bg', starBg);
      // 设置随机位置
      star.style.left = `${Math.random() * 100}%`;
      star.style.top = `${Math.random() * 100}%`;
      container.appendChild(star);
    }
  }
}
customElements.define('night-sky', NightSky);

原理：star-item的attributeChangedCallback会先校验是否处于night-sky内部，外部设置的属性不会触发样式修改；闭合Shadow DOM也阻止了外部直接访问内部样式。

内容的提问来源于stack exchange，提问作者AxD