Как использовать HTML & с Shadow DOM
HTML-слот это один из самых замечательных стандартов W3C. Объедините это с другим впечатляющим стандартом W3C шаблоны, и у вас есть невероятная смесь для работы. Быть способным создавать и добавлять элементы HTML на страницу используя JavaScript это необходимая и важная задача.
Это полезно, когда фрагмент кода должен появляются только в определенное время, или когда вы не хотите набирать сотни одинаково структурированных HTML-элементов, но хотите автоматизировать процесс.
Создание HTML-элементов в JavaScript - это не очень желательно. Это хлопотно, чтобы проверить и перепроверить, если вы покрыли все теги, расположили их в правильном порядке, в общем, просто тоже много печатать и отслеживать. Эта суматоха, однако, получил решение когда тег появился. Если что-то должно быть добавляется на страницу динамически, Вы можете положить его внутри элемент.
В этом посте я покажу вам, как вы можете использовать теги вместе с JavaScript для создать мини-фабрику таблиц HTML которые могут создавать и заполнять сотни подобных таблиц.
тег содержит HTML-код, который не будет отображаться браузерами пока он не будет правильно добавлен в документ, используя JavaScript. элемент.
Shadow DOM похож на обычный DOM (модель документа анализируется из HTML). Это создает дерево с областями видимости (дерево Shadow DOM), которое имеет корень сам по себе а также может иметь собственный стиль.
Когда вы вставляете дерево Shadow DOM в элемент в основном документе - этот элемент будет называться теневой хозяин -, все дочерние элементы теневого хоста, помеченные слот атрибут (не совпадает с вышеупомянутым
Shadow DOM, на момент написания этой статьи (июль 2017 г.), поддерживается только в браузерах на базе WebKit и Blink но вы можете проверить фактическое состояние поддержки браузера на CanIUse в любое время.
Настройка HTML
Все еще сбиваете с толку? Давайте посмотрим код, начиная с элемент.
внутри Внутри шаблона, Я также добавил некоторые основные стили для таблицы, используя , есть Что ж использовать в качестве плана за создание нескольких таблиц это будет добавлено в документ. Есть
а также ) выступая в качестве заполнителей для заголовков столбцов и значений ячеек. Каждый слот имеет уникальный название приписывать это идентифицирует это.