shadow-dom-utils – una libreria di utilità per gestire l’attraversamento di shadowdom

Questo pacchetto fornisce una serie di utilità utili per gestire lo shadow DOM,
principalmente per situazioni di ambiente di test in cui si potrebbe desiderare di rompere incapsulamento.

Install

npm i shadow-dom-utils

Usage

querySelector

Ciò fornisce un modo per interrogare il DOM per un singolo elemento ignorando i limiti del DOM ombra.

import {querySelector} from 'shadow-dom-utils'; // Finds a `p` tag in the document, or any shadow roots
querySelector('p'); // Finds a `p` tag in a specific node and any shadow roots
// underneath it.
querySelector('p', node); // Specify options
querySelector('p', node, options);

Cross-boundary selectors

Puoi abbinare i confini del DOM ombra impostando l’estensione
opzione crossBoundary su true:

querySelector('div p', document, {crossBoundary: true});

Ciò corrisponderà a qualsiasi tag p che esiste sotto un div, indipendentemente
se quel div è nella stessa radice shadow o no (ma deve
essere ancora un genitore nella gerarchia).

querySelectorAll

Ciò fornisce un modo per interrogare il DOM per tutti gli elementi corrispondenti
un selettore, che ignora i confini del DOM ombra.

import {querySelectorAll} from 'shadow-dom-utils'; // Finds all `p` tags in the document, or any shadow roots
querySelectorAll('p'); // Finds all `p` tags in a specific node and any shadow roots
// underneath it.
querySelectorAll('p', node); // Specify options
querySelector('p', node, options);

Cross-boundary selectors

You can match across shadow DOM boundaries by setting the
crossBoundary option to true:

querySelectorAll('div p', document, {crossBoundary: true});

Ciò corrisponderà a tutti i tag p che esistono sotto un div, indipendentemente
se quel div è nella stessa radice shadow o no (ma deve
essere ancora un genitore nella gerarchia).

elementFromPoint

Behaves the same way as elementFromPoint but
ignores shadow boundaries to find the deepest element at the
given coordinates.

import {elementFromPoint} from 'shadow-dom-utils'; // Get the element at [10, 20]
elementFromPoint(10, 20);

getHost

Recupera l’elemento host di un determinato nodo, indipendentemente dal fatto che sia
un host shadow root o un documento.

Un elemento in una radice ombra avrà un altro elemento come suo
host, l’elemento a cui appartiene la radice shadow.

Un elemento nel documento avrà il documento come suo host.

import {getHost} from 'shadow-dom-utils'; // Get the host element or document
getHost(node);

Limitazioni dei selettori transfrontalieri

Per dare una comprensione dei limiti del crossBoundary
opzione, vedere questi esempi:

/*
 * Will NOT match cross-boundary, foo and bar must be in the same
 * root as otherwise they would not be a direct parent-child.
 */
foo > bar /*
 * Will match cross-boundary, as foo and bar do not necessarily
 * have to be a direct parent-child.
 */
foo bar /*
 * Will match each selector cross-boundary
 */
a b, c d

Essenzialmente, l’unica volta in cui un selettore può attraversare i confini dell’ombra
è quando è un selettore discendente (foo bar, separato da uno spazio).