::slotted()

Ви читаєте англійську версію цього вмісту, бо ще не існує перекладу для цієї мови. Допоможіть нам перекласти цю статтю!

Псевдо-елемент ::slotted() являє собою будь-який елемент, поміщений в слот всередині шаблону HTML (додаткову інформацію див. в розділі Використання шаблонів і слотів).

Це працює тільки при використанні всередині CSS, поміщеного в тіньовий DOM. Зверніть увагу, що цей селектор не буде вибирати текстовий вузол, поміщений в слот; він призначений тільки для фактичних елементів.

/* Вибір будь-якого елемента, поміщеного в слот */
::slotted(*) {
  font-weight: bold;
}

/* Вибір будь-якого <span> елемента, поміщеного в слот */
::slotted(span) {
  font-weight: bold;
}

Синтакс

::slotted( <compound-selector-list> )

where
<compound-selector-list> = <compound-selector>#

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Приклади

Наступні фрагменти коду взяті з демо-версії застосування псевдо-елемента :slotted (див. 'живу' версію).

У цьому демо ми використовуємо простий шаблон з трьома слотами:

<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>

Кастомний веб-компонент— <person-details> —  визначений, як:

customElements.define('person-details',
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById('person-template');
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({mode: 'open'});

      let style = document.createElement('style');
      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
                           'h2 { margin: 0 0 10px; }' +
                           'ul { margin: 0; }' +
                           'p { margin: 10px 0; }' +
                           '::slotted(*) { color: gray; font-family: sans-serif; } ';

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
  }
})

Ви побачите, що при заповненні елемента стилю  певними значеннями, ми вибираємо всі слотовані елементи  (::slotted(*)) і надаємо їм інший шрифт і колір. Це дозволяє їм краще виділятися поруч зі слотами, які не були успішно заповнені. 

Для вибору конкретних елементів, вказуєм необхідний тип елементу замість *.  Для прикладу - селектор, який застосує стилі лише для div елементів, матиме наступний вигляд (::slotted(div)). Більше інформації про стилізацію slot елементів та розробку кастомних веб компонентів, ви можете знайти на моєму github.

При вставці на сторінку елемент виглядає наступним чином:

<person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> </person-details>

Cпецифікації

Specification Status Comment
CSS Scoping Module Level 1
The definition of '::slotted' in that specification.
Working Draft Початкове визначення

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::slottedChrome Full support 50Edge No support NoFirefox Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 37Safari Full support 10WebView Android Full support 50Chrome Android Full support 50Firefox Android Full support 63
Full support 63
No support 59 — 63
Disabled
Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 37Safari iOS Full support 10Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

See also