Comment utiliser HTML & avec Shadow DOM
Emplacement HTML est l’un des standards les plus remarquables du W3C. Combinez cela avec un autre standard impressionnant du W3C appelé des modèles, et vous avez un fabuleux mélange à utiliser. Être capable de créer et ajouter des éléments HTML à une page en utilisant JavaScript est une tâche nécessaire et importante.
C'est utile lorsqu'un extrait de code doit apparaissent seulement à certains moments, ou lorsque vous ne voulez pas taper des centaines d’éléments HTML structurés de la même façon mais que vous souhaitez automatiser le processus.
La création d’éléments HTML en JavaScript est pas si désirable. Il est fastidieux de devoir vérifier et revérifier si vous avez couvert toutes les balises, les avez placées dans le bon ordre, tout compte fait, il y a juste aussi beaucoup à taper et à garder une trace. Cette tourmente, cependant, a une solution quand le la balise est apparue. Si quelque chose doit être ajouté à la page dynamiquement, vous pouvez le mettre à l'intérieur du élément.
Dans ce post, je vais vous montrer comment utiliser le balises avec JavaScript pour créer une mini usine de table HTML qui peut créer et peupler des centaines de tables similaires.
le
le La balise contient du code HTML ne sera pas rendu par les navigateurs jusqu'à ce qu'il soit correctement ajouté au document, en utilisant JavaScript. le élément.
UNE Shadow DOM est similaire à un DOM classique (le modèle de document analysé à partir de HTML). Il crée un arbre couvert (un arbre DOM Shadow), qui a un racine de son propre et peut aussi avoir un son propre style.
Lorsque vous insérez l’arbre DOM Shadow dans un élément du document principal, cet élément sera appelé élément hôte d'ombre -, tous les éléments enfants de l'hôte shadow qui sont marqués du fente attribut (différent de celui mentionné ci-dessus
Les DOM Shadow, au moment de la rédaction de cet article (juillet 2017), sont pris en charge uniquement dans les navigateurs WebKit et Blink mais vous pouvez vérifier l'état actuel de la prise en charge du navigateur sur CanIUse à tout moment..
Mise en place du HTML
Toujours déroutant? Voyons un peu de code, en commençant par le élément.
À l'intérieur À l'intérieur du modèle, J'ai aussi ajouté quelques styles de base pour la table, en utilisant le , il y a un bien utiliser comme un plan pour créer des tables cela sera ajouté à un document. Il y a
et ) agissant comme des espaces réservés pour les titres de colonne et les valeurs de cellule. Chaque emplacement a un unique prénom attribuer cela l'identifie.