Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
 
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
#1

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

14.04.2018, 17:32. Просмотров 328. Ответов 25
Метки нет (Все метки)

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

Присвоить переменной "х" значение суммы переменных "a" и "b" если "a > b" или их произведение в остальных случаях.
В этом задании вам нужно вписать в указанное место код, который будет...

Как написать регулярное выражение для выдергивания английских букв и символов: "+", ",", ":", "-", " ", "!", "?" и "."
Не могу ни как собразить как написать регулярное выражение для выдергивания...

Получить значение из {"text1":"val1","text2":"val2","text3":{"text":"val"}}
Есть такая строка var my =...

Включить Shadow DOM в хроме
Как? Добавлено через 48 минут Разобрался

Создание браузерной CAD, "math scetchpad", "Geogebra", "Живая геометрия""
Создаю браузерную версию CAD системы, для обучения школьников стереометрии и...

Создать программу такую, что пользователь вводит число, а мы ему выдаём "-лет" или "-год" "-года"
4)Создать программу такую, что пользователь вводит число, а мы ему выдаём...

25
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
15.04.2018, 00:37 #2
Тогда, думаю, стоит совместить рассказ о Shadow DOM со спецификацией Custom Elements - они идеально работают в тесной связке

Как будет свободное время - постараюсь возложить лапки на клавиатуру и написать.
А пока предлагаю задать волнующие вопросы кратким списком
1
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 01:42  [ТС] #3
Eva Rosalene, к примеру - в спеке говориться о том, что чтобы получить доступ к теневой копии элемента нужно
хостнуть его -
Javascript
1
document.querySelector(elem).attachShadow({mode: 'open'})
а дальше работать по апи обычного DOM -
HTML5
1
<div class="text">я простой элемент</div>
Javascript
1
document.querySelector('.text').attachShadow({mode: 'open'}).innerText= 'я теневая копия';
Так не работает - согласно спеке, я вызовом attachShadow({mode: 'open'}) должен был получить тень дива, и уже с ней работать, изменив при этом текстовое содержимое. Но при парсинге по идее должен получать текст обычного элемента.

Добавлено через 12 минут
Eva Rosalene, оказалась недоработка -
вот рабочий пример - песочница
Javascript
1
document.querySelector('.text').attachShadow({mode: 'open'}).textContent= 'я теневая копия';
Получается, что помимо валидного списка элементов, а именно -
HTML5
1
<article> <aside> <blockquote> <body> <div> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <header> <main> <nav> <p> <section> <span>
и кастомных элементов, рассказа о которых я уже с нетерпением жду , имеются ограничения на использование методов\свойств для чтения\записи. Неплохо бы и список такой иметь. По всей спеке пока соберешь
0
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 01:50  [ТС] #4
Ну вот собственно первый тычок палкой в "НЕЧТО" сделан Сразу появляется вопрос - а зачем? Зачем так усложнять. Ответ видимо в скрине? Таким образом, пытаться закрыться от парсеров?
0
Миниатюры
Shadow DOM. Экскурсия по "злачным" местам  
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 01:53  [ТС] #5
Еще один вывод - Shadow DOM не зеркало. Это что -то вроде автономного дерева у каждого элемента, тень которого становиться корнем.
0
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
15.04.2018, 02:13 #6
Qwerty_Wasd, дело в том, что наличие shadow root значит больше, чем наличие child nodes и отображается в таком случае только тень. Чтобы встроить детей в shadow root используется тег slot

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const wait = duration => new Promise(resolve => setTimeout(resolve, duration));
const print = text => {
  let status = document.querySelector("#status");
  let copy = status.cloneNode();
  status.parentElement.replaceChild(copy, status);
  
  copy.appendChild(document.createTextNode(text.toString()));
}
 
async function main( ) {
  let demo = document.querySelector("#demo");
  
  await wait(2000);
  print("Shadow created");
  let shadow = demo.attachShadow({ mode: "open" });
  shadow.appendChild(document.createTextNode("I am shadow"));
  
  await wait(2000);
  print("Slot created")
  shadow.appendChild(document.createElement("br"));
  shadow.appendChild(document.createElement("slot"));
}
 
main().catch(err => console.error(err));
HTML5
1
2
<div id="demo">I am child</div>
<div id="status">Initial</div>
CSS
1
2
3
#status {
  background-color: lightgray;
}
https://codepen.io/eva-rosalene/pen/wmLpvV

Добавлено через 1 минуту
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Shadow DOM не зеркало. Это что -то вроде автономного дерева у каждого элемента, тень которого становиться корнем.
Именно. Shadow Tree - отдельное автономное DOM-дерево, которое заменяет собой при отображении настоящее поддерево Элемента.

Добавлено через 3 минуты
Кстати, интересноть #1 - встроенный тег <video> на самом деле имеет ShadowDOM. В Chrome в настройках дебаггера включаем Elements -> Show User Agent Shadow DOM - смотрим, изучаем реализацию
1
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 02:44  [ТС] #7
Теперь возвращаемся ненадолго к, зацепившему меня, вопросу от одного из участников форума - "можно сотворить псевдоэлемент у псевдоэлемента?". Что есть псевдоэлементы - не сущности ли это Shadow DOM? Тогда выходит, что к ним можно получить доступ? А там и клонировать не далеко? Не может быть чтобы API не предусматривал это!

Добавлено через 28 минут
Eva Rosalene,
В SD создан слот, а как его отобразить?
Javascript
1
document.querySelector('.text').attachShadow({mode:'open'}).appendChild(document.createElement("slot")).innerHTML="я тень";
0
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
15.04.2018, 12:50 #8
Qwerty_Wasd, тегу slot не надо иметь innerHTML, в него встраиваются дети оригинального узла.
1
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 20:10  [ТС] #9
Eva Rosalene, раз он принимает потомков оригинала, как их потом получить?

Добавлено через 4 часа 15 минут
Смотрите, что получается - песочница
HTML5
1
2
.text parent
  .text-child child
Javascript
1
2
document.querySelector('.text').attachShadow({mode: 'open'}).textContent='я тень';
document.querySelector('.text').shadowRoot.appendChild(document.createElement("slot"))
при добавлении детей в слот, оригинал снова присутствует на странице???
0
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
15.04.2018, 23:01 #10
Qwerty_Wasd, именно, слот автоматически отображает детей на странице. По сути, то точка подстановки детей. А ещё слоты бывают именованными.
1
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 23:06  [ТС] #11
Eva Rosalene,
Цитата Сообщение от Eva Rosalene Посмотреть сообщение
слот автоматически отображает детей на странице
а как при этом спрятать оригинал?

Добавлено через 3 минуты
Цитата Сообщение от Eva Rosalene Посмотреть сообщение
А ещё слоты бывают именованными
в чем профит перед обычными?
0
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
15.04.2018, 23:08 #12
Qwerty_Wasd, какой оригинал?
0
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 23:16  [ТС] #13
Eva Rosalene, https://codepen.io/qwerty_wasd/pen/zWVyXa
0
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
15.04.2018, 23:19 #14
Qwerty_Wasd, что из того вы понимаете под оригиналом?
0
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 23:20  [ТС] #15
Eva Rosalene, то что я заменил тенью
0
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
15.04.2018, 23:22 #16
Qwerty_Wasd, не добавлять слот, тогда оригинал не будет виден.
0
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
15.04.2018, 23:38  [ТС] #17
Eva Rosalene, Но тогда и детей этого элемента не будет на странице
Javascript
1
2
document.querySelector('.text').attachShadow({mode: 'open'}).textContent='я тень';
//document.querySelector('.text').shadowRoot.appendChild(document.createElement("slot"))
То есть с момента как я хостнул элемент, мне заново построить все дерево уже в SD?

Добавлено через 1 минуту
То есть мне каждый раз пробегаться по ветке и передобавлять потомков к тени?

Добавлено через 8 минут

Не по теме:

Eva Rosalene, Я Вас наверное заколебал вопросами Я прошу прощения за занудство Очень хочется разобраться

0
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
16.04.2018, 00:15 #18
Qwerty_Wasd, так вы же и хотите, чтобы детей не было на странице. Или вы про строчку "parent"?
0
Qwerty_Wasd
550 / 552 / 323
Регистрация: 16.04.2016
Сообщений: 1,681
Завершенные тесты: 2
16.04.2018, 00:18  [ТС] #19
Цитата Сообщение от Eva Rosalene Посмотреть сообщение
Или вы про строчку "parent"?
да все верно )

Добавлено через 1 минуту
Мне казалось при добавлении слота он примет детей оригинала, а тень будет замещать. Видимо не так понял)
0
Eva Rosalene
Male-to-Female
4049 / 1587 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
16.04.2018, 00:19 #20
Qwerty_Wasd, строка "parent" - тоже ребёнок лемента, который хостнули.
По сути, в вашем примере, у него их два - Text Node с содержимым "parent" и div с ещё одним ребёнком тоже типа Text Node -- с содержимым child.
1
16.04.2018, 00:19
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.04.2018, 00:19
Привет! Вот еще темы с решениями:

Как убрать кнопки "Minimize" и "Maximize", "Close" в заголовке окна?
КАК УБРАТЬ КНОПОЧКИ 'Minimize' и 'Maximize', 'Close' в заголовке окна (чтобы...

Загвоздка с "<input class="text2" onclick="document.getElementById ."
есть типа тест : 3 инпута , 1 радиобокс ... проблема в том что если...

<input type="Image" name="send" src="send.gif"> - скрипт не работает
LUDI SCRIPT NE RABOTAET, GDE OSHIBKA. ESLI EST' PREDLOJENIYA NA JAVA SCRIPT NE...

Если навел мышкой на 1 то вывести "единица", если 2 то "Двойка", если на 3 то "тройка" и тд., и это все в одной функции
Ребят, выручайте. &lt;div id=&quot;1&quot; onMouseOver=&quot;inf()&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru