Использование тега ‹content› в теневой модели DOM

Я пытаюсь использовать теневую DOM без какой-либо структуры, которая ее абстрагирует, в основном для того, чтобы изучить ее тонкости. Я использую полифиллы webcomponents.js, поэтому он работает в разных браузерах.

Мне удалось создать собственный элемент и установить его теневую DOM, но по какой-то причине тег <content></content> не включает ожидаемый контент.

Я ожидаю, что этот пример будет отображаться как

Shadow DOM
Hello world
More Shadow

Но это выглядит как

Shadow DOM
More Shadow

Что мне здесь не хватает?

<script src="webcomponents-lite.min.js"></script>

<test-component>
    <div>Hello world</div>
</test-component>

<template id="test-component">
    <div>Shadow DOM</div>
    <content></content>
    <div>More shadow</div>
</template>

<script>
    class TestComponent extends HTMLElement {
        constructor() {
            super();

            var shadow = super.attachShadow({ mode: 'open' });

            var template = document.getElementById('test-component');
            var clone = document.importNode(template.content, true);
            shadow.appendChild(clone);
        }
    }

    customElements.define('test-component', TestComponent);
</script>

(Пример завершен, и его можно запустить как весь HTML-файл, при условии, что у вас есть webcomponents-lite.min.js, или его можно запустить без файла .js в поддерживаемых браузерах)


html web-component custom-element shadow-dom content-tag
person configurator    schedule 03.09.2017    source источник
comment
Элемент content был заменен элементом slot.   -  person Alohci    schedule 03.09.2017
comment
Пример использования вместо этого элемента slot и атрибута slot см. В шаблоне developer.mozilla.org/en-US/docs/Web/HTML/Element/   -  person sideshowbarker    schedule 04.09.2017

Ответы (1)


arrow_upward
2
arrow_downward

Как отмечено в комментарии выше, вам необходимо использовать элемент slot и slot attribute вместо этого. . Вот точно такой же код, как и выше, но реализованный с использованием элемента и атрибута slot:

<test-component>
    <div slot=middle>Hello world</div>
</test-component>

<template id="test-component">
    <div>Shadow DOM</div>
    <slot name=middle></slot>
    <div>More shadow</div>
</template>

<script>
    class TestComponent extends HTMLElement {
        constructor() {
            super();

            var shadow = super.attachShadow({ mode: 'open' });

            var template = document.getElementById('test-component');
            var clone = document.importNode(template.content, true);
            shadow.appendChild(clone);
        }
    }

    customElements.define('test-component', TestComponent);
</script>

person sideshowbarker    schedule 04.09.2017