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

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

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

Новые блоги и статьи Все статьи Все блоги /
Почему SEO не начинается с ключевых слов: что проверить до написания текстов Neotwalker 01.08.2026 Когда владельцу сайта предлагают заняться SEO, первым шагом часто становится сбор запросов и написание текстов. Логика кажется понятной: 1. Находим ключевые слова. 2. Добавляем их на. . .	Знание — сила: Доктрина интенциональности знаний, углубление в формулу Hrethgir 01.08.2026 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11957&stc=1&d=1785567302 Знаменитый афоризм Фрэнсиса Бэкона «Знание — сила» (Scientia potentia est) в массовой культуре принято понимать. . .	SUNO Ai - Река Без Дна zorxor 31.07.2026 Автор стихотворения - астрофизик Марина Катыс Ссылка на сгенерированную музыкальную композицию: https:/ / suno. com/ song/ 6f6e5464-b290-4650-be6c-44c85f8d8013 Я говорю, что Время- как вода течет. . .	Из невошедшего на форум (диалог с ИИ-гугла) zorxor 29.07.2026 А вот, что интересно, сказал мне ИИ-гугла: Этот текст — эмоциональный пост пользователя под ником zorxor на интернет-форуме (вероятно, посвященном мистике, непознанному или альтернативной науке). . . .
Был праздник вчера, а я и не знал. kumehtar 28.07.2026 27. 07. 2026г. Intel Core 2 Duo исполнилось 20 лет Салют, шампанское, овации! :drink:	Нейтральные знания, чистый код - бла-бла-бла-бла, на самом деле кликбейт и самореклама, плагиат, и вот почему Hrethgir 27.07.2026 То-есть отклонение такой публикации говорит само за себя, и пусть только возьмут на вооружение после отклонения публикации - это будет чистейшим актом плагиата. Отклонял Хабр. Дословно, отклонённая. . .	тв 16 бой ии anaschu 27.07.2026 Великий Перелом ИИ: Как уравнения ОДУ Radau дожали цензурные фильтры Алисы Фиксируем в мемофонде Теории Всего беспрецедентный факт в истории ИИ-зондирования. В затяжном многораундовом. . .	мв 15. непроверенное, возможно, глюк anaschu 27.07.2026 НАУЧНО-АНАЛИТИЧЕСКИЙ ОТЧЕТ. РАЗДЕЛ 1. 1: «НАУКА» (РАСШИРЕННАЯ СТЕХИОМЕТРИЧЕСКАЯ И ГЕНЕТИЧЕСКАЯ ВЕРСИЯ)Тема: Теоретическое обоснование инвариантности 19-мерного тензорного ядра непрерывных ОДУ и. . .

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

	Shadow DOM. Экскурсия по "злачным" местам 14.04.2018, 17:32. Показов 2479. Ответов 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

Опции темы