Améliorez le HTML avec des balises personnalisées et Shadow DOM

Dans mon article précédent, j'ai expliqué les bases de la création d'étiquettes personnalisées. En fait, les balises personnalisées éliminent une partie de la fragilité lors de la création d’applications Web de qualité. Cependant, la recherche du contrôle ne s’arrête pas et les balises personnalisées traditionnelles ne suffisent pas à créer des applications riches en performances. Par exemple, le nombre de sélecteurs de style dans votre code peut augmenter avec l'ajout de balises personnalisées. Ce n’est qu’un des nombreux facteurs pouvant entraîner des problèmes de performances.

Une façon de résoudre ce problème consiste à utiliser Shadow DOM.

Shadow DOM fonctionne en introduisant des styles étendus. Il ne nécessite aucune convention ou outil de dénomination particulier. Avec Shadow DOM, regrouper CSS avec du balisage est facile. De plus, cette fonctionnalité nous permet de masquer tous les détails sur l'implémentation en simple JavaScript.

Pourquoi utiliser Shadow DOM ?

Shadow DOM fournit les solutions suivantes :

• Autoriser les éléments indépendants dans le DOM. Les requêtes telles quedocument.querySelectorne renverront pas d'éléments orphelins.
• Autoriser le CSS étendu. Le CSS étendu garantit que toutes les règles de style restent dans la page. Cela signifie également des sélecteurs CSS plus simples, sans aucun conflit de noms et de nombreuses classes communes.

Notre exemple

Pour démontrer Shadow DOM, nous utiliserons un composant simple appelétuts-tabs. Toutes les références dans cet article pointeront vers ce code. Pour découvrir Shadow DOM, jetez un œil à la démo ci-dessous :

Comprendre Shadow DOM

Qu'est-ce que Shadow DOM ?

Avant de commencer à coder avec Shadow DOM, vous devez comprendre le DOM standard.

Le HTML est l'épine dorsale de votre site Web. En quelques minutes seulement, vous pouvez créer une page. Lorsque vous ouvrez la page dans votre navigateur, le DOM entre en jeu. Une fois que le navigateur charge la page, il commence à analyser le code HTML dans un modèle de données. Le modèle de données est une structure arborescente dans laquelle les nœuds représentent des éléments en HTML. Le modèle de données est facile à modifier et à manipuler avec du code.

L'inconvénient est que des pages Web entières ou même des applications Web complexes sont traitées comme une structure de données unique. Ce n'est pas facile à déboguer ! Par exemple, un style CSS appliqué à un composant peut finir par affecter un autre composant ailleurs dans l'application.

Utiliseziframes lorsque vous souhaitez isoler une partie de votre interface du reste. Mais les iframes sont lourdes et extrêmement restrictives.

C'est pourquoi Shadow DOM a été introduit. Il s'agit d'une fonctionnalité puissante des navigateurs modernes qui permet aux développeurs Web d'inclure des sous-arbres de divers éléments dans le DOM. Ces sous-arborescences du DOM n'affectent pas l'arborescence principale du document. Techniquement, ils sont appelésShadow Trees.

Un arbre d'ombre a uneracine d'ombre, qui est attachée à un parent dans le DOM. Ce parent s'appelle leShadow Host.

Par exemple, si vous branchezsur un navigateur alimenté par WebKit, il sera converti en slider. Pourquoi? Il s'agit d'un curseur car l'un des éléments DOM du sous-arbre comprend la « portée » pour modifier son apparence et introduire une fonctionnalité de type curseur. C'est un avantage que Shadow DOM apporte aux onglets.

Wow, ça fait beaucoup de théories. Maintenant, vous souhaiterez peut-être écrire du code pour voir comment Shadow DOM est implémenté.

Guide étape par étape pour utiliser Shadow DOM

Étape 1 : Créer l'élément Shadow DOM

Utilisezelement.attachShadow()pour créer des éléments Shadow DOM.

Dans notre exempletuts-tabvous verrez le code utilisé pour créer un élément Shadow DOM.

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

Étape 2. Ajouter du contenu à Shadow Root

Ensuite, nous utiliserons.innerHTMLpour ajouter du contenu à la racine fantôme. Notez que ce n'est pas la seule façon de remplir le Shadow DOM. Il existe de nombreuses API qui vous aident à remplir le Shadow DOM.

shadowRoot.innerHTML = ``

Étape 3 : Connectez les éléments personnalisés au Shadow DOM

Connecter des éléments personnalisés à Shadow DOM est très simple. Gardez à l'esprit que lorsque vous combinez des éléments personnalisés avec Shadow DOM, vous pourrez créer des composants encapsulés à l'aide de CSS, JavaScript et HTML. Par conséquent, vous allez créer un tout nouveau composant Web qui pourra être réutilisé dans votre application.

Dans notre exemple, nous utilisonscustomElements.define()pour créer un nouvel élément personnalisé. Comme mentionné dans le tutoriel précédent, les nouveaux éléments doivent contenir "-" dans leur nom.customElements.define()创建一个新的自定义元素。正如上一教程中提到的，新元素的名称中应包含“-”。tuts-tabs组件扩展了HTMLElementLe composant étendHTMLElement.

当我们扩展HTMLElement时，在构造函数中调用super()非常重要。另外，构造函数是需要创建shadowRoot的地方。

customElements.define('tuts-tabs', class extends HTMLElement { constructor() { super(); // always call super() first in the constructor. // Attach a shadow root to . const shadowRoot = this.attachShadow({mode: 'open'}); ... });

创建shadowRoot后，您可以为其创建 CSS 规则。 CSS 规则可以包含在 `; } ... });