Рубрики
Без рубрики

Что такое тенело?

Знайте больше о Shadow Dom и как они работают, и в чем он является основным принципом.

Автор оригинала: Saptak Sengupta.

Сначала я узнал о Shadow DOM от моего любопытства о том, как браузеры реализуют теги, такие как

Однако ни один из браузеров не позволил разработчикам написать собственную нестандартную тень DOM (хотя Google Chrome имел версию V0). Я снова наткнулся на тень Dom, глядя на проблема в jquery чинить. Так что теперь, начиная с 2018 года, большинство браузеров начали поддерживать Shadow DOM API и, следовательно, jQuery, необходимые для этой поддержки для этого.

|. |. |. https://caniuse.com/#feat=shadowdomv1 |.

Итак, что такое эта тень Дом и почему мы даже его используем?

Что такое дом?

Спецификация W3C описывает его как «способ объединения нескольких домовых деревьев в одну иерархию и как эти деревья взаимодействуют друг с другом в документе, что позволяет улучшить композицию домена».

Теперь, чтобы понять, что нам нужно понять, что такое дом. Дом или объектная модель DOM или DOCUCE – это конструкция, подобная дереву, содержащую различные элементы (или теги) и строки текста, которые показаны языком разметки (например, HTML, XML и т. Д.).

Итак, скажем, у нас есть HTML-код что-то вроде этого:

\

\ \ \ \Title\ \ \ \ \This is header\ \This is a \ link \ \ \ \
\

Итак, визуально вы можете показать структуру DOM как что-то вроде:

Тень Дом

Теперь Shadow DOM позволяет нам создавать отдельные скрытые домовые деревья, которые прикреплены к элементам регулярного дерева DOM. Это позволяет вам реализовать функциональную инкапсуляцию, то есть кто-то разборка регулярного дерева DOM и применение укладки на регулярное дерево DOM не знает или не влияет на свойства и функциональные возможности дерева Shadow DOM. Следовательно, вы используете Shadow DOM, не зная сложные детали того, как реализован DOM. Это важно, потому что это следует за основными идеями объектно-ориентированного программирования.

Дерево Shadow Dom начинается с Тень корня И может затем иметь какой-либо регулярный элемент DOM, прикрепленный под ним.

Давайте посмотрим пример: HTML

\

\ \ \ \Title\ \ \ \
 \ \

\

Javascript

const shadowHost = document.getElementById('shadowHost');
const shadowRoot = shadowHost.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '\Hello Shadow DOM\';

Итак, это создаст тень домо. Визуально вы можете представлять это как: Итак, как видите, есть несколько разных частей в теневой доме, кроме нее, чтобы быть просто еще одним домом.

  • Тень дерево : Домное дерево внутри тени DOM.
  • Теневая граница : место, где заканчивается тень DOM, и начинается обычный дом.
  • Тень корня : Корневой узел тени дерева.
  • Теневый хост : Регулярный узел DOM, к которому прикреплен тень DOM.
  • Тень ребенка Дерево ниже теневого корневого узла.

Shadow DOM не может быть прикреплен к немногим разным элементам, как упомянуто В спецификации Отказ Некоторые из причин:

  • Различные теги формы, такие как <ввод>,
  • Такие элементы, такие как или или
    , которые обычно являются самообслуживаниями тегов, и обычно не содержат детский узел.

Также, если вы видите в коде, есть «{Mode: Open}». Режим определяет, можете ли вы редактировать стиль Shadow DOM из-за пределов Shadow DOM или нет.

Почему нам в любом случае нужна Shadow DOM?

Есть несколько разных сценариев, где вы можете использовать Shadow DOM. Наиболее важной функциональностью Shadow DOM является реализацией концепции инкапсуляции. Таким образом, в основном кто-то использует Host Shadow DOM, не должен заботиться о стиле и внедрении дома внутри. Таким образом, мало использования случаев использования:

  • Браузер реализует Shadow DOM для различных различных тегов, таких как
  • Вы можете сделать свой собственный Shadow Shadow DOM, когда вам нужно создать элемент, который вы хотите не изменять по стайлию оставшегося дома.
  • Вы также можете использовать Shadow DOM, когда вы хотите создать разделение определенного элемента DOM из главного элемента DOM.

Так это теневая дома очень тень-эй? Ну, может быть, так как он остается спрятанным от главной поездки DOM. Но в то же время это часто очень полезно из-за его свойств инкапсуляции.

Читайте ещё по теме: