Question

以下代码是chrome开发工具的视图

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

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

谢谢

Answer 1

ShadowDOM旨在防止CSS泄漏到shadowDOM之中或之外。它是<iframe>的替代品，它具有相同的限制。 <iframe>中的任何CSS都不会影响<iframe>之外的内容，而<iframe>之外的CSS不会影响<iframe>内的内容。

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

以下任何选项均不适用于现有HTML元素。这些示例仅适用于您编写的自定义元素。

在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）中重新设置元素的样式

1 个答案: