Дочерний контент внутри настраиваемого элемента не отображается

Диапазон «Дочерний контент» отображается в Light DOM, но на самом деле не отображается на странице (см. Снимок экрана).

Кто-нибудь знает, почему этого не видно? Также я отмечаю, что он, по-видимому, не имеет слота, что было моей попыткой сделать его видимым.

<!doctype html>
<html>
  <body>
    <hello-world>
      <span>Child content</span>
    </hello-world>
    <script>
        var template = `
          <span>Hello world</span>
          <slot></slot>
        `;
        var MyElementProto = Object.create(HTMLElement.prototype);
        // Fires when an instance of the element is created
        MyElementProto.createdCallback = function() {
            var shadowRoot = this.createShadowRoot();
            shadowRoot.innerHTML = template;
        };
        document.registerElement('hello-world', { prototype: MyElementProto });
    </script>
  </body>
</html>

Снимок экрана дерева DOM и страницы с не видимым дочерним элементом

P.S. Это в Chrome 57.0.2987.133


javascript custom-element shadow-dom
person owencm    schedule 05.04.2017    source источник
comment
Я думаю, что элемент отображается, но не отображается.   -  person TheGenie OfTruth    schedule 05.04.2017

Ответы (1)


arrow_upward
2
arrow_downward

Оказывается, createShadowRoot устарел. Кажется, что он делает то, что я хочу, и не показывает ошибок, но не поддерживает вставку слотов (или, по-видимому, отображение дочерних элементов).

Замена createShadowRoot() на attachShadow({mode: 'open'}) решила проблему.

person owencm    schedule 05.04.2017