Резервный контент в «неназванном» слоте никогда не отображается - PullRequest
Новая
       49

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

0 голосов
/ 07 ноября 2018

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

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

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>

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

enter image description here

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

enter image description here

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

1 Ответ

0 голосов
/ 07 ноября 2018

Это ожидаемое поведение. На самом деле запасной вариант не может быть отображен, потому что некоторые элементы перехватываются и раскрываются неназванным элементом <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>
...