如何在#shadow-root ( shadow DOM ) 中重新设置元素样式

Question

以下代码来自 chrome 开发工具

<textarea>
   #shadow-root (user-agent)
     <p> This I want to restyle </p>
 <textarea>

如果我想在阴影 DOM 中重新设置元素样式，我必须使用什么 CSS 选择器？

谢谢

Answer 1

ShadowDOM 旨在防止 CSS 泄漏 INTO 或 OUT OF shadowDOM。它是 <iframe> 的替代品，后者具有相同的限制。 <iframe>内的任何CSS都不会影响<iframe>外的内容，<iframe>外的CSS不会影响<iframe>内的内容].

但您可以使用以下选项之一影响内部 CSS：

None of the options below work for existing HTML elements. These examples are only for custom elements you write.

在 shadowDOM 中设置元素样式的第一种方法是将样式与内容一起放置在 shadowDOM 中。

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode:'open'}).innerHTML = `
    <style>
      p { background-color: #A00; color: white; }
    </style>
    <p>inner content</p>`;
  }
}

customElements.define('my-el', MyEl);

<my-el></my-el>

第二种更有限的方法是使用 CSS 变量：

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode:'open'}).innerHTML = `
    <style>
      p { background-color: var(--bgcolor, #A00); color: var(--color, white); }
    </style>
    <p>inner content</p>`;
  }
}

customElements.define('my-el', MyEl);

body {
  --bgcolor: yellow;
  --color: navy;
}

<my-el></my-el>

第三种方式，也是有限的，是通过属性或属性：

class MyEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode:'open'}).innerHTML = `
    <p>inner content</p>`;
  }
  
  set bgColor(val) {
    this.shadowRoot.querySelector('p').style.backgroundColor = val;
  }

  set color(val) {
    this.shadowRoot.querySelector('p').style.color = val;
  }
}

customElements.define('my-el', MyEl);

const myEl = document.querySelector('my-el');
myEl.bgColor = '#090';
myEl.color = 'white';

<my-el></my-el>

如何在#shadow-root ( shadow DOM ) 中重新设置元素样式

how to restyle element in #shadow-root ( shadow DOM )

html

css

shadow-dom