Як використовувати HTML & З Тіньовим DOM
HTML слот є одним з найбільш чудових стандартів, зроблених W3C. Поєднайте це з іншим вражаючим стандартом W3C шаблонів, і у вас є казкова суміш для роботи. Можливість створювати і додавати елементи HTML на сторінку використовуючи JavaScript це необхідне і важливе завдання.
Це корисно, коли потрібно виконати фрагмент коду з'являються лише в певний час, або коли ви не хочете вводити сотні подібно структурованих елементів HTML, але хочете автоматизувати процес.
Створення елементів HTML у JavaScript не так бажано. Якщо ви охопили всі теги, розмістили їх у правильному порядку, то в цілому, потрібно просто перевіряти та повторно перевіряти. теж багато вводити і відстежувати. Проте ця суматоха, отримали рішення коли з'явився тег. Якщо щось має бути динамічно додано до сторінки, Ви можете помістити його всередину
елемент.
У цій посаді я покажу вам, як ви можете використовувати
і теги разом з JavaScript для створити міні-заводську таблицю HTML які можуть створювати і заповнювати сотні подібних таблиць.
The
і
теги
The тег містить код HTML не відображатимуться веб-переглядачами доки він не буде належним чином доданий до документа, використовуючи JavaScript. The
тег a заповнювач, який ви додаєте до Shadow DOM які можуть бути зроблені змісту елемент.
A Тінь DOM подібний до звичайного DOM (модель документа проаналізована з HTML). Це створює оброблюване дерево (дерево Shadow DOM), яке має a власний корінь і може також мати a власний стиль.
Коли ви вставляєте дерево Shadow DOM в елемент головного документа - елемент буде називатися хост тіней -, всі дочірні елементи тіньового хоста, які позначені символом слот
атрибут (не той самий, що й вищезгаданий
тег) буде зайняти своє місце в щойно вставленому піддереві.
Тінь DOM, як і написання цієї статті (липень 2017), є підтримується лише у веб-переглядачах на основі WebKit та Blink але ви можете перевірити фактичний стан підтримки браузера CanIUse в будь-який час.
Налаштування HTML
Все ще незрозуміло? Давайте подивимося на деякий код, починаючи з елемент.
Всередині Всередині шаблону, Я також додав деякі основні стилі для таблиці, використовуючи За межами шаблону, Є два Кожен Зараз на сторінці є всі текстові рядки, що містяться в прогонах, тому нам також потрібно додати JavaScript. Використовуючи Javascript, ми вставляємо таблицю зсередини шаблону в обидва divs як дерево Shadow DOM. Після вставки проміжки поміщаються у відповідні слоти всередині таблиці і відображають потрібні назви стовпців або значення клітин. Результат буде дві автоматично створені таблиці , які використовують той самий шаблон. По-перше, ми повинні перевірити, чи підтримується Shadow DOM у браузері користувача. The Ми створюємо спеціальну змінну, яку називаємо Всередині Існує два Тоді ми додати копію вмісту шаблону до дерева Shadow DOM за допомогою І наші динамічні HTML-таблиці готові, ось як виглядає вивід у Chrome:, є
добре використовувати як план для створення деяких таблиць що буде додано до документа. Існує
елементи всередині комірок таблиці ( і ) діють як заповнювачі для назв стовпців і значень комірок. Кожен слот має унікальний ім'я
приписуйте це ідентифікує його.
тег.
, для двох окремих таблиць ми хочемо додати на сторінку.
елемент має a
слот
атрибут якого значення дорівнює ім'я
значення їх відповідності
тега всередині .
Приєднання дерева Shadow DOM
attachShadow ()
метод додає дерево Тіньового DOM до елемента і повертає кореневий вузол дерева Shadow DOM. The якщо
умова в коді нижче перевіряє, чи підтримує цей браузер цей метод тестуванням, якщо divs на сторінці мають attachShadow
метод. // перевіряємо, чи підтримується Shadow DOM, якщо ('attachShadow' в document.createElement ('div')) else console.warn ('attachShadow не підтримується');
templateContent
що служить посиланням до змісту шаблону. if ('attachShadow' у document.createElement ('div')) let templateContent = document.querySelector ('шаблон'). нехай divs = document.querySelectorAll ('div'); divs.forEach (функція (div) // внутрішній цикл); else console.warn ('attachShadow не підтримується');
для кожного
цикл, дерево Shadow DOM є додається до кожного div (div.attachShadow (mode: 'open')
).режиму
опції для attachShadow
: відчинено
і зачинено
. Якщо зачинено
був обраний кореневий вузол дерева Shadow DOM стануть недоступними до зовнішніх елементів і об'єктів DOM.templateContent.cloneNode (правда)
метод. if ('attachShadow' у document.createElement ('div')) let templateContent = document.querySelector ('шаблон'). нехай divs = document.querySelectorAll ('div'); divs.forEach (функція (div) div.attachShadow (mode: 'open'). appendChild (templateContent.cloneNode (true))); else console.warn ('attachShadow не підтримується');