как изменить стиль элемента в # shadow-root (shadow DOM) - PullRequest
Новая
       14

как изменить стиль элемента в # shadow-root (shadow DOM)

0 голосов
/ 22 ноября 2018

следующий код представляет собой вид из инструментов Chrome Dev 

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

какой CSS-селектор мне нужно использовать, если я хочу переопределить элемент в теневом DOM?

спасибо

1 Ответ

0 голосов
/ 22 ноября 2018

ShadowDOM был разработан для предотвращения утечки CSS INTO или OUT OF shadowDOM.Это своего рода замена для <iframe>, на которую были наложены те же ограничения.Любой CSS в <iframe> не может влиять на контент вне <iframe>, а CSS вне <iframe> не может влиять на контент внутри <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>
...