Объект ShadowRoot.

  ShadowRoot - Является интерфейсом к теневому дереву элемента тега.
  С элементом тега основной DOM-структуры (дерева документа) скриптом может быть связано так называемое теневое дерево - некий обособленный HTML-код.
  В этом случае такой элемент называют хост-элементом этого теневого дерева.

  С одним элементом тега может быть связано только одно теневое дерево.

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

  Особенность теневого дерева в том, что его элементы не являются "дочерними" элементами хост-элемента теневого дерева и вообще не входят в логическое пространство основного дерева документа.
  Поэтому элементы теневого дерева не выбираются соответствующими методами интерфейса HTMLElement для хост-элемента (например методом getElementsByTagName), или аналогичными методами интерфейса HTMLDocument (например методом querySelectorAll), что, в ряде случаев, бывает очень удобно.

  Элементы теневого дерева не определяются CSS-селекторами документа, в котором находится хост-элемент теневого дерева, а только CSS-селекторами установленными в теневом дереве.
  Однако элементы теневого дерева могут унаследовать стилевое оформление от хост-элемента.
  Также точно "дочерние" элементы хост-элемента добавленные на Web-странице в теневое дерево могут унаследовать стилевое оформление от этого хост-элемента.
  Поэтому, в самом теневом дереве, можно переопределить стилевое оформление его хост-элемента, для наследования как элементами теневого дерева, так и "дочерними" элементами этого хост-элемента добавленными в теневое дерево.

  Частным случаем обособленности пространства CSS-селекторов теневого дерева является, обособленное от основного дерева документа, пространство значений атрибута тега ID.
  Естественно, что значения атрибута тега ID теневого дерева можно использовать только внутри теневого дерева, то есть в находящихся в нем соответствующих элементах тегов (например STYLE или SCRIPT).

  Надо иметь в виду, что теневое дерево создаётся не как часть реального документа, а как DOM-структура в памяти, поэтому использование теневого дерева, в принципе, должно повышать производительность работы с DOM.

  Для событийной DOM, на Web-странице, теневое дерево всё же виртуально становится частью документа, в котором находится хост-элемент теневого дерева, поэтому соответствующие события в теневом дереве могут быть обработаны на уровне документа и(или) окна.
  Однако не все события теневого дерева могут "всплыть" во внешний DOM.
  При смешивании контента хост-элемента с контентом теневого дерева, обработчики событий, установленные для внутренних DOM-объектов хост-элемента попавших в теневое дерево, сохраняются.
  Вообще-то говоря, браузеры, отображая элементы управления такие как INPUT или TEXTAREA, и так формировали их из простых элементов типа DIV или STRONG.
  То есть формировали и поддерживали некое теневое дерево для этих элементов управления до появления технологии ShadowRoot.
  Поэтому для таких элементов разработчик не может создать теневое дерево, а их теневое дерево созданное браузером не доступно для скриптов (хотя такое теневое дерево можно посмотреть с помощью соответствующей опции браузера).
  Экземпляр доступен:

  1. Через свойство shadowRoot объекта HTMLElement
  2. С помощью метода attachShadow объекта HTMLElement
  3. С помощью метода getRootNode объекта ShadowRoot
  Свойства.
  activeElement - Содержит ссылку на интерфейс HTMLElement для элемента тега теневого дерева, поле которого находится в фокусе в текущий момент.
  Если фокуса ввода нет ни у одного элемента, то свойство activeElement содержит значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.activeElement

Значения формата записи:

  baseURI - Содержит базовый адрес документа, в котором находится хост-элемент теневого дерева.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.baseURI

Значения формата записи:

  childElementCount - Содержит количество элементов тегов первого уровня вложенности в теневом дереве.
  Значение имеет числовой формат.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.childElementCount

Значения формата записи:

  childNodes - Содержит ссылку на интерфейс NodeList к списку DOM-объектов внутреннего контента теневого дерева.
  В списке могут быть экземпляры объекта HTMLElement, экземпляры объекта Text и экземпляры объекта Comment.
  Это динамический список.
  Учитываются только объекты верхнего уровня вложенности.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.childNodes

Значения формата записи:

  children - Содержит ссылку на интерфейс HTMLCollection к коллекции экземпляров объекта HTMLElement элементов тегов теневого дерева.
  Учитываются только элементы верхнего уровня вложенности.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.children

Значения формата записи:

  delegatesFocus - Содержит значение опции delegatesFocus.
  Значение имеет логический формат.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.mode

Значения формата записи:

  firstChild - Содержит ссылку на интерфейс к первому DOM-объекту внутреннего контента теневого дерева.
  Таким DOM-объектом может быть элемент тега, или блок текстового контента, или комментарий.
  Если в теневом дереве нет ни одного DOM-объекта внутреннего контента, то свойство firstChild свойство содержит значение null

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.firstChild

Значения формата записи:

  firstElementChild - Содержит ссылку на интерфейс HTMLElement к первому элементу тега теневого дерева.
  Если в теневом дереве нет ни одного элемента, то свойство firstElementChild содержит значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.firstElementChild

Значения формата записи:

  host - Содержит ссылку на интерфейс HTMLElement к хост-элементу теневого дерева.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.host

Значения формата записи:

  innerHTML - Содержит весь внутренний контент теневого дерева в виде HTML-кода.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.innerHTML[= Код]

Значения формата записи:

  isConnected - Содержит значение true если устройство пользователя, на котором загружен документ создавший теневое дерево, имеет Интернет-соединение, и значение false - в противном случае.
  Значение имеет логический формат.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.isConnected

Значения формата записи:

  lastChild - Содержит ссылку на интерфейс к последнему DOM-объекту внутреннего контента теневого дерева.
  Таким DOM-объектом может быть элемент тега, или блок текстового контента, или комментарий.
  Если в теневом дереве нет ни одного DOM-объекта внутреннего контента, то свойство lastChild содержит значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.lastChild

Значения формата записи:

  lastElementChild -Содержит ссылку на интерфейс HTMLElement к последнему элементу тега теневого дерева.
  Если в теневом дереве нет ни одного элемента тега, то свойство lastElementChild содержит значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.lastElementChild

Значения формата записи:

  mode - Содержит значение опции mode.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.mode

Значения формата записи:

  nodeName - Содержит значение #document-fragment.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.nodeName

Значения формата записи:

  nodeType - Содержит значение 11.
  Значение имеет числовой формат.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.nodeType

Значения формата записи:

  ownerDocument - Содержит ссылку на интерфейс HTMLDocument к документу, в котором находится хост-элемент теневого дерева.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.ownerDocument

Значения формата записи:

  pointerLockElement - Содержит ссылку на интерфейс HTMLElement к элементу тега этого теневого дерева, для которого был вызван метод requestPointerLock.
  Если указатель мышки не привязан к элементу, то свойство содержит значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.pointerLockElement

Значения формата записи:

  styleSheets - Содержит ссылку на интерфейс StyleSheetList к списку таблиц стилей этого теневого дерева.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.styleSheets

Значения формата записи:

  textContent - Содержит текстовый контент всех блоков внутреннего текстового контента теневого дерева, в том числе и текстовый контент всех его элементов тегов.
  Значение имеет строковый формат.
  Значение, в том числе, включает и контент элементов тегов SLOT, до его замещения контентом хост-элемента.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.textContent[= Текст]

Значения формата записи:

  Методы:

  append - Добавляет новые DOM-объекты внутреннего контента теневого дерева после всех уже имеющихся объектов.
  Возвращает значение undefined.
  Добавленными DOM-объектами внутреннего контента теневого дерева могут быть фрагменты документа, элементы тегов, блоки текстового контента, комментарии, или текст.
  Метод append поддерживается не всеми браузерами.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.append(Список элементов)

Значения формата записи:

  appendChild - Добавляет новый DOM-объект внутреннего контента теневого дерева после всех уже имеющихся объектов.
  Возвращает ссылку на интерфейс к новому объекту.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.appendChild(Элемент)

Значения формата записи:

  elementFromPoint - Возвращает ссылку на интерфейс HTMLElement к самому глубокому по вложенности элементу тега этого теневого дерева с заданными координатами.
  Такие координаты, в частности, могут быть получены с помощью свойств clientX и clientY экземпляра объекта Event.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.elementFromPoint(X,Y)

Значения формата записи:

  getElementById - Возвращает ссылку на интерфейс HTMLElement к элементу тега теневого дерева, который имеет заданный идентификатор.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.getElementById(Идентификатор элемента тега)

Значения формата записи:

  getRootNode - Возвращает ссылку на этот экземпляр объекта ShadowRoot.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.getRootNode()

Значения формата записи:

  getSelection - Возвращает экземпляр объекта Selection для этого теневого дерева.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.getSelection()

Значения формата записи:

  hasChildNodes - Возвращает значение true если теневое дерево содержит элементы тегов, блоки внутреннего текстового контента, или комментарии, и значение false - в противном случае.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.hasChildNodes()

Значения формата записи:

  insertBefore - Добавляет новый DOM-объект внутреннего контента в заданное место теневого дерева.
  Возвращает ссылку на интерфейс к новому объекту.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.insertBefore(Элемент, Экземпляр)

Значения формата записи:

  normalize - Объединяет смежные блоки внутреннего текстового контента теневого дерева, удаляет пустые блоки его внутреннего текстового контента, на самом верхнем уровне вложенности.
  Возвращает значение undefined.
  Смежные блоки внутреннего текстового контента тега могут образоваться из за использования метода splitText объекта Text.
  Блоки внутреннего текстового контента, разделенные элементами тегов, не являются смежными.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.normalize()

Значения формата записи:

  querySelector - Возвращает ссылку на интерфейс HTMLElement к первому элементу тега теневого дерева, который определяется заданным селектором CSS.
  Учитываются элементы всех уровней входимости.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.querySelector(Селектор)

Значения формата записи:

  querySelectorAll - Возвращает ссылку на интерфейс NodeList к списку экземпляров объекта HTMLElement для всех элементов тегов теневого дерева, которые определяются заданным селектором CSS.
  Учитываются элементы всех уровней входимости.
  Экземпляры объекта HTMLElement будут следовать в списке в порядке следования соответствующих элементов в HTML-коде.
  Это статический список.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.querySelectorAll(Селектор)

Значения формата записи:

  prepend - Добавляет новые DOM-объекты внутреннего контента теневого дерева перед всеми уже имеющимися объектами.
  Возвращает значение undefined.
  Добавленными DOM-объектами внутреннего контента теневого дерева могут быть фрагменты документа, элементы тегов, блоки текстового контента, комментарии, или текст.
  Метод prepend поддерживается не всеми браузерами.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.prepend(Список элементов)

Значения формата записи:

  removeChild - Удаляет заданный DOM-объект внутреннего контента из теневого дерева в память.
  Возвращает ссылку на интерфейс к удалённому объекту. Все свойства и методы интерфейса по этой ссылке будут доступны.
  Такими DOM-объектами могут быть элементы тегов, блоки текстового контента, или комментарии.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.removeChild(Экземпляр)

Значения формата записи:

  replaceChild - Заменяет DOM-объект внутреннего контента теневого дерева.
  Возвращает ссылку на интерфейс к заменённому объекту, который сохраняет в памяти. Все свойства и методы интерфейса по этой ссылке будут доступны.
  Заменяемыми DOM-объектами могут быть элементы тегов, блоки текстового контента, или комментарии.

Формат записи в коде скрипта:

  • Экземпляр объекта ShadowRoot.replaceChild(Элемент, Объект)

Значения формата записи: