Shadow DOM. Экскурсия по "злачным" местам

Qwerty_Wasd · Регистрация: 16.04.2016

Студворк — интернет-сервис помощи студентам

Я приветствую всех кто зашел сюда.

Тема, что я хочу поднять, многим новичкам не знакома, включая меня. Недавно один из участников форума, спросил можно ли создать псевдоэлемент у псевдоэлемента. Ну конечно не.... стоп. А невозможно ли это? Ведь помимо DOM структуры с методами работы с ней, существует еще и теневая модель дерева. Вот ссыль на спецификацию => http://w3c.github.io/webcomponents/spec/shadow/
И у Shadow DOM(далее SD) также есть API для работы с ним. Например, оперирование теневыми копиями элемента. К сожалению, не все владеют английским языком на уровне чтения техлит'ы, а те у кого проблем со чтением не возникает, читая документацию, могут потеряться в терминологии. Сухой, без примеров. Опять же не все - описывая вторых, автор тонко намекнул на себя.

Ну не вундеркинд я, что ж поделать

Да, гугл дружелюбно предоставляет варианты статей профессионалов, что используют SD в работе. Но есть один минус, пытаясь объяснить, они забывают о том, что читать их могут люди, которым до их планки еще тянуться и тянуться. Профита от прочитанного с гулькин... нос

А посему, нижайше прошу профессионалов этого форума - крайне доходчиво и с практическими(не абстрактными) примерами, рассказать, что же это за зверь такой - Shadow DOM, живущий за стенкой фронтальной модели дерева, или как еще ее называют "Light Tree", или просто DOM. Как он взаимодействует с DOM? Что на нем можно сделать, а что не получиться? Для чего он вообще нужен? И т.д.

Заранее благодарю всех за участие

Qwerty_Wasd · 16.04.2018, 00:25 **[ТС]**

Eva Rosalene, а вот здесь

Сообщение от Eva Rosalene

строка "parent" - тоже ребёнок лемента, который хостнули

"пожалуйста помедленнее, я записываю"

то есть как это? я же ж хостнул

JavaScript
1
document.querySelector('.text').attachShadow({mode: 'open'})

HTML5
1
.text parent

Qwerty_Wasd · 16.04.2018, 00:28 **[ТС]**

Посмотрите на структуру

Qwerty_Wasd · 16.04.2018, 00:32 **[ТС]**

Я кажется понял, прошу прощения

То есть при добавлении слота, весь элемент включая потомков, становиться "под флаг" тени? Я правильно понимаю?

@Eva Rosalene · 16.04.2018, 00:51

Qwerty_Wasd, не сам лемент, а все его потомки. Причём именно в то место, где добавлен слот.

@Eva Rosalene · 16.04.2018, 00:57

Shadow DOM. Экскурсия по "злачным" местам

$0 здесь - <div class="parent"></div>

Qwerty_Wasd · 16.04.2018, 19:06 **[ТС]**

Eva Rosalene,

Сообщение от Eva Rosalene

Причём именно в то место, где добавлен слот.

то есть таким образом я могу повторить всю цепочку потомков одно элемента в любом месте и любое кол-во раз?

Добавлено через 17 часов 1 минуту

Сообщение от Qwerty_Wasd

то есть таким образом я могу

оказалось не могу. Так нельзя сделать.

Новые блоги и статьи Все статьи Все блоги /
Из невошедшего на форум (диалог с ИИ-гугла) zorxor 29.07.2026 А вот, что интересно, сказал мне ИИ-гугла: Этот текст — эмоциональный пост пользователя под ником zorxor на интернет-форуме (вероятно, посвященном мистике, непознанному или альтернативной науке). . . .	Был праздник вчера, а я и не знал. kumehtar 28.07.2026 27. 07. 2026г. Intel Core 2 Duo исполнилось 20 лет Новости компьютерного мира и их обсуждение (4) Салют, шампанское, овации! :drink:	Нейтральные знания, чистый код - бла-бла-бла-бла, на самом деле кликбейт и самореклама, плагиат, и вот почему Hrethgir 27.07.2026 То-есть отклонение такой публикации говорит само за себя, и пусть только возьмут на вооружение после отклонения публикации - это будет чистейшим актом плагиата. Отклонял Хабр. Дословно, отклонённая. . .	тв 16 бой ии anaschu 27.07.2026 Великий Перелом ИИ: Как уравнения ОДУ Radau дожали цензурные фильтры Алисы Фиксируем в мемофонде Теории Всего беспрецедентный факт в истории ИИ-зондирования. В затяжном многораундовом. . .
мв 15. непроверенное, возможно, глюк anaschu 27.07.2026 НАУЧНО-АНАЛИТИЧЕСКИЙ ОТЧЕТ. РАЗДЕЛ 1. 1: «НАУКА» (РАСШИРЕННАЯ СТЕХИОМЕТРИЧЕСКАЯ И ГЕНЕТИЧЕСКАЯ ВЕРСИЯ)Тема: Теоретическое обоснование инвариантности 19-мерного тензорного ядра непрерывных ОДУ и. . .	Очистка реквизитов и табличных частей документа при копировании (вариант 2) Maks 26.07.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРаботу", разработанного в КА2. Задача: Заменить алгоритм запрета копирования документов для сотрудников с ролью "Стажер",. . .	Доктрина интенционального знания - Доктрина для портала "Срез". Hrethgir 25.07.2026 Может найдётся кто захочет оценить доктрину. . . Написания правил участия для меня роскошь, требующая лимита времени, поэтому все сообщения не прошедшие модерацию будут видны только участникам портала,. . .	сукцессия 44. Решил подать на припринт в межународные сервисы препринтов. Но нужно одобрение от ученых anaschu 25.07.2026 Английский вариант. Пока кто то не одобрит мою личность, мне не получиться это опубликовать на препринте. Но заявку на публикацию статьи я сегодня подам.

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696

	Shadow DOM. Экскурсия по "злачным" местам 14.04.2018, 17:32. Показов 2470. Ответов 25 Метки нет (Все метки) Я приветствую всех кто зашел сюда. Тема, что я хочу поднять, многим новичкам не знакома, включая меня. Недавно один из участников форума, спросил можно ли создать псевдоэлемент у псевдоэлемента. Ну конечно не.... стоп. А невозможно ли это? Ведь помимо DOM структуры с методами работы с ней, существует еще и теневая модель дерева. Вот ссыль на спецификацию => http://w3c.github.io/webcomponents/spec/shadow/ И у Shadow DOM(далее SD) также есть API для работы с ним. Например, оперирование теневыми копиями элемента. К сожалению, не все владеют английским языком на уровне чтения техлит'ы, а те у кого проблем со чтением не возникает, читая документацию, могут потеряться в терминологии. Сухой, без примеров. Опять же не все - описывая вторых, автор тонко намекнул на себя. Ну не вундеркинд я, что ж поделать Да, гугл дружелюбно предоставляет варианты статей профессионалов, что используют SD в работе. Но есть один минус, пытаясь объяснить, они забывают о том, что читать их могут люди, которым до их планки еще тянуться и тянуться. Профита от прочитанного с гулькин... нос А посему, нижайше прошу профессионалов этого форума - крайне доходчиво и с практическими(не абстрактными) примерами, рассказать, что же это за зверь такой - Shadow DOM, живущий за стенкой фронтальной модели дерева, или как еще ее называют "Light Tree", или просто DOM. Как он взаимодействует с DOM? Что на нем можно сделать, а что не получиться? Для чего он вообще нужен? И т.д. Заранее благодарю всех за участие 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	16.04.2018, 00:28 [ТС]
	Посмотрите на структуру Миниатюры 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	16.04.2018, 00:32 [ТС]
	Я кажется понял, прошу прощения То есть при добавлении слота, весь элемент включая потомков, становиться "под флаг" тени? Я правильно понимаю? 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	16.04.2018, 00:51
	Qwerty_Wasd, не сам лемент, а все его потомки. Причём именно в то место, где добавлен слот. 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	16.04.2018, 00:57
	`$0` здесь - `<div class="parent"></div>` 0