DOM | Интерфейс ShadowRoot

IDL

[Exposed=Window]
interface ShadowRoot : DocumentFragment {
   readonly attribute ShadowRootMode mode;
   readonly attribute Element host;
   attribute EventHandler onslotchange;
};

enum ShadowRootMode { "open", "closed" };

Узлы ShadowRoot просто известны как «теневые корни» (shadow roots).

У теневых корней есть связанный «режим» (mode) («open» or «closed» — «открытый» или «закрытый»).

У теневых корней есть связанный «фокус делегатов» (delegates focus). Изначально установлено значение false.

У теневых корней есть связанный «доступ к внутренним элементам» (available to element internals). Изначально установлено значение false.

У теневых корней есть связанный хост, который никогда не бывает null.

Алгоритм получения родителя теневого корня при заданном событии event возвращает null, если флаг составленного события event не установлен, а теневой корень является корнем цели вызова первой структуры пути к событию event, а в противном случае — хостом теневого корня.

Получатель атрибута mode должен возвращать режим этого this.

Получатель атрибута host должен возвращать хост этого this.

Атрибут onslotchange — это IDL-атрибут обработчика событий для обработчика событий onslotchange, тип события обработчика которого — slotchange.

В «древовидном порядке с включением теней» (shadow-including tree order) — это предварительный порядок с включением теней, обхода в глубину дерева узлов.

«Предварительный порядок с включением теней, обхода в глубину» (Shadow-including preorder, depth-first traversal) дерева узлов tree  — это предварительный порядок, обхода tree в глубину, причем для каждого теневого хоста, встречающегося в tree, предварительный порядок с учетом тени, обхода в глубину дерева узлов теневого корня этого элемента просто после того, как он встречается.

«Включающий тень корень» (shadow-including root) объекта — это его включающий тень корень, хоста корня, если корень объекта является теневым корнем, и его корень в противном случае.

Объект A является «потомком с тенью» (shadow-including descendant) объекта B, если A является потомком B, или корень A является теневым корнем, а хост корня A является инклюзивным потомком включающим тень B.

«Инклюзивный потомок с тенью» (shadow-including inclusive descendant) — это объект или один из его потомков с тенью.

Объект A является «предком с тенью» (shadow-including ancestor) объекта B, если и только если B является теневым потомком A.

«Инклюзивный предок с тенью» (shadow-including inclusive ancestor) — это объект или один из его включающих тень предков.

Узел A является «закрытым-теневым-скрытым» (closed-shadow-hidden) от узла B, если выполняются все следующие условия:

• Корень А — это теневой корень.
• Корень A не является инклюзивным теневым предком B.
• Корень A — это теневой корень, режим которого «closed» или хост корня A закрыт-затенён-скрыт от B.

Чтобы «перенацелить» (retarget) объект A на объект B, повторяйте эти шаги, пока они не вернут объект:

1. Если верно одно из следующих утверждений
   А не узел
   Корень A - это не теневой корень
   B - узел, а корень A - инклюзивный теневой предок B
затем верните A.
2. Установите A в качестве хоста корня A.

Ссылки

DOM стандарт — https://efim360.ru/dom/

Читайте перевод полной версии стандарта «объектной модели документа», чтобы ознакомиться со всеми концепциями и интерфейсами.

DOM — Living Standard — https://dom.spec.whatwg.org

Читайте официальную документацию живого стандарта «объектной модели документа», чтобы быть в курсе последних изменений.