Тег SLOT

  Парный тег SLOT предназначен для создания точки вставки внутреннего контента хост-элемента теневого дерева в это теневое дерево.
  Если элементы тега SLOT не использовать, то контент теневого дерева полностью заменит на Web-странице весь контент хост-элемента теневого дерева.

  При использовании элементов тега SLOT контент теневого дерева можно перемешать на Web-странице с контентом хоста теневого дерева, указав для соответствующих "дочерних" элементов хост-элемента теневого дерева место их "вставки" в контент теневого дерева.

  Такая вставка происходит только логически, для отображения на Web-странице, и соответствующие "дочерние" элементы хост-элемента теневого дерева вместе со всем своим содержимым встанут на указанные места в теневом дереве, но, при этом, останутся "дочерними" элементами хост-элемента теневого дерева в основном дереве документа.
  Однако, при отображении контента этих элементов будут использованы соответствующие стили теневого дерева, кроме того, с помощью псевдоэлемента ::slotted, в теневом дереве к этим элементам можно применять особые стили.
  Тег SLOT можно использовать статически в HTML-коде документа внутри - хост-элемента теневого дерева как обычный блочный тег, и тогда, всё что находится внутри каждого такого элемента тега SLOT не будет "затерто" контентом теневого дерева.

  Однако тег SLOT лучше использовать в HTML-коде теневого дерева, который создаётся динамически (скриптом), также создавая элементы тега SLOT динамически.
  В этом случае, во-первых точки вставки можно определять в разных местах теневого дерева, во-вторых, из теневого дерева, можно применять псевдоэлемент ::slotted.
  Содержимое элемента тега SLOT, созданного динамически в теневом дереве, будет полностью заменено соответствующим "дочерним" элементом хост-элемента теневого дерева.
  Если же в хост-элементе такого "дочернего" элемента не назначено, то, для своего содержимого, элемент тега SLOT в теневом дереве будет являться обычным элементом блочного тега.
  Атрибуты:
  NAME - Устанавливает имя этой точки вставки.

  • Значение:

    • Допустимый символьный код, назначенный именем точки вставки
        Значение атрибута SLOT "дочернего" элемента хост-элемента теневого дерева, предназначенного для этой точки вставки, должно быть идентичным этому значению.

  • Значение по умолчанию - нет.
  • Атрибут не обязательный.


Пример (Chrome):
<DIV ID=DED>
   <DIV slot="xxxx">На деревню - дедушке, Константину Макарычу.</DIV><BR><BR>
   <BUTTON ID="createShadowRoot">Создать теневое дерево</BUTTON> </DIV>
<SCRIPT>
  var Val = null;
  var Op = document.getElementById("createShadowRoot");
  var OPW = function(W)
   {
    var N1 = document.getElementById("DED");
    var N2 = N1.attachShadow({ mode: 'open' });
    Val = "<style> :HOST {color: blue !important;} ::slotted(DIV) {color: red} I {color: green} </style>
      <DIV>Ванька</DIV>" + "<SLOT NAME='xxxx'></SLOT> <I>Жуков</I>";
    N2.innerHTML = Val;
   };
  Op.onclick = OPW;
</SCRIPT>
Результат:
На деревню - дедушке, Константину Макарычу.