Использование Stencil.js - изменение пользовательских элементов Light DOM не работает в Edge - PullRequest
Новая
       34

Использование Stencil.js - изменение пользовательских элементов Light DOM не работает в Edge

0 голосов
/ 26 июня 2019

Я использую библиотеку Stencil.js для создания веб-компонентов. Библиотека загружает полифилл в Edge и IE11, чтобы обеспечить их поддержку браузером, поскольку у них отсутствует встроенная поддержка спецификации веб-компонентов.

В Chrome, если я изменяю пользовательский элемент light dom , используя собственный DOM API (appendChild, removeChild и т. Д.), И теневой домен содержит элемент, Chrome повторно анализирует сплющенное дерево Dom и обновления для Light DOM отражаются в слоте.

Похоже, что это может быть ошибка или ограничение в polyfill. Кто-нибудь знает, правда ли это и есть ли обходные пути?

Пример кода: 

    // web component
@Component({
  tag: "foo-component",
  shadow: true
})
export class Foo {
  return (
    <Host>
      <div class="stylin"><slot /></div>
    </Host>
  );
}


<body>
  <foo-component><p>bar</p></foo-component>
</body>

var newPar = document.createElement("p");
newPar.innerHTML = "bar2";
document.querySelector("foo-component").appendChild( newPar );

Ожидаемое сплющенное дерево: 

<foo-component>
  #shadowRoot <!-- shadowRoot is simulated in Edge -->
    <div class="stylin><p>bar</p><p>bar2</p></div>
</foo-component>

Фактическое сплющенное дерево: 

<foo-component>
  #shadowRoot <!-- shadowRoot is simulated in Edge -->
    <div class="stylin><p>bar</p></div>
    <p>bar2</p>
</foo-component>

1 Ответ

1 голос
/ 27 июня 2019

Ни ваши "ожидаемые", ни "фактические" не совсем верны. <p>bar</p> и <p>bar2</p> находятся в светлом домене и должны быть снаружи теневой корень для браузеров с теневым домом: 

<foo-component>
  #shadowRoot
    <div class="stylin"><slot>...</slot></div>
  <p>bar</p>
  <p>bar2</p>
</foo-component>

Только <div class="stylin">, содержащий слот, внутри shadow dom.

Только самое последнее обновление Edge (v76) поддерживает shadow dom - если у вас его нет, вы должны увидеть совершенно другую структуру. Polyfill для Edge не добавляет shadow dom - он обеспечивает стилизацию в области видимости - поэтому, если у вас нет v76, вы должны увидеть все в светлом dom: 

<foo-component>
  <div class="stylin"><p>bar</p></div>
  <p>bar2</p>
</foo-component>

Кроме «смоделированного» shadowRoot, это то же самое, что и ваш «фактический», и это то, что вы должны ожидать, потому что вы добавили дочернего элемента bar2 к foo-component, а не div.stylin. Без теневого дома нет разницы между светлым и теневым домом и нет места.

Пожалуйста, проверьте ваш дом снова, чтобы быть уверенным - вы не должны видеть никаких теневых корней в Edge

...