Резервный контент в безымянном слоте никогда не отображается

Я пытаюсь понять, как работают веб-компоненты, и не могу полностью понять правила, касающиеся резервного содержимого в слотах:

У меня есть такой веб-компонент:

const template = document.createElement('template');
template.innerHTML = `
  <slot name="content">
    <span>fallback</span>
  </slot>
  <slot>
    <span>fallback on an anonymus slot</span>
  </slot>
  <section>...and more content form shadow DOM</section>
`;

class SomeComponent extends HTMLElement{
  constructor() {
    super();

    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

window.customElements.define('some-component', SomeComponent);

и если я помещу этот компонент на страницу вроде

<some-component>
  <span slot="content">named slot content</span>
</some-component>

Я никогда не вижу "запасного" контента для безымянного слота:

введите здесь описание изображения

но он присутствует в теневом DOM:

введите здесь описание изображения

Я не использую никаких поллифиллов и полагаюсь на текущую поддержку веб-компонентов Chrome.


javascript web-component custom-element shadow-dom html5-template
person Andrew Kovalenko    schedule 07.11.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Это ожидаемое поведение. На самом деле резервный вариант не может быть отображен, потому что некоторые элементы улавливаются и раскрываются безымянным элементом <slot>: (невидимые space и CRLF) текстовые элементы перед тегами <span> и после тегов </span>.

Если вы удалите их:

<some-component><span slot="content">named slot content</span></some-component>

... тогда вы увидите резервный текст!

const template = document.createElement('template');
template.innerHTML = `
  <slot name="content">
    <span>fallback</span>
  </slot>
  <slot>
    <span>fallback on an anonymus slot</span>
  </slot>
  <section>...and more content form shadow DOM</section>
`;

class SomeComponent extends HTMLElement{
  constructor() {
    super();

    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

window.customElements.define('some-component', SomeComponent);
<some-component><span slot="content">named slot content</span></some-component>

person Supersharp    schedule 07.11.2018