Пользовательский элемент с тенью не отображается - PullRequest
Новая
       14

Пользовательский элемент с тенью не отображается

2 голосов
/ 23 марта 2019

Я пытаюсь создать пользовательский элемент с тенью, но когда я добавляю тень, содержимое элемента не отображается.Вот мой код:

JavaScript: 

class CustomElement extends HTMLElement {
 constructor (){
  super();
  var shadow = this.attachShadow({mode: 'open'});
  var content = document.createElement("DIV");
  content.innerText = "hello world";
  shadow.appendChild(content);
 }
}
customElements.define("custom-element", CustomElement);

HTML: 

<custom-element>blah blah blah</custom-element>

Но все, что он отображает, это текст "hello world"

1 Ответ

2 голосов
/ 23 марта 2019

Это нормальное поведение Shadow DOM: содержимое Shadow DOM маскирует исходное содержимое (называемое Light DOM).

Если вы хотите раскрыть содержимое Light DOM, используйте <slot> в Shadow DOM. 

class CustomElement extends HTMLElement {
 constructor (){
  super();
  var shadow = this.attachShadow({mode: 'open'});
  var content = document.createElement("DIV");
  content.innerHTML = "hello world: <br> <slot></slot>";
  shadow.appendChild(content);
 }
}
customElements.define("custom-element", CustomElement);
<custom-element>blah blah blah</custom-element>
...