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

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

14.04.2018, 17:32. Просмотров 381. Ответов 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
Ответы с готовыми решениями:

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

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

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

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

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

25
Eva Rosalene
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 2
15.04.2018, 00:37 2
Тогда, думаю, стоит совместить рассказ о Shadow DOM со спецификацией Custom Elements - они идеально работают в тесной связке

Как будет свободное время - постараюсь возложить лапки на клавиатуру и написать.
А пока предлагаю задать волнующие вопросы кратким списком
1
Qwerty_Wasd
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 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
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 2
15.04.2018, 01:50  [ТС] 4
Ну вот собственно первый тычок палкой в "НЕЧТО" сделан Сразу появляется вопрос - а зачем? Зачем так усложнять. Ответ видимо в скрине? Таким образом, пытаться закрыться от парсеров?
0
Миниатюры
Shadow DOM. Экскурсия по "злачным" местам  
Qwerty_Wasd
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 2
15.04.2018, 01:53  [ТС] 5
Еще один вывод - Shadow DOM не зеркало. Это что -то вроде автономного дерева у каждого элемента, тень которого становиться корнем.
0
Eva Rosalene
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 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
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 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
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 2
15.04.2018, 12:50 8
Qwerty_Wasd, тегу slot не надо иметь innerHTML, в него встраиваются дети оригинального узла.
1
Qwerty_Wasd
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 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
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 2
15.04.2018, 23:01 10
Qwerty_Wasd, именно, слот автоматически отображает детей на странице. По сути, то точка подстановки детей. А ещё слоты бывают именованными.
1
Qwerty_Wasd
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 2
15.04.2018, 23:06  [ТС] 11
Eva Rosalene,
Цитата Сообщение от Eva Rosalene Посмотреть сообщение
слот автоматически отображает детей на странице
а как при этом спрятать оригинал?

Добавлено через 3 минуты
Цитата Сообщение от Eva Rosalene Посмотреть сообщение
А ещё слоты бывают именованными
в чем профит перед обычными?
0
Eva Rosalene
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 2
15.04.2018, 23:08 12
Qwerty_Wasd, какой оригинал?
0
Qwerty_Wasd
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 2
15.04.2018, 23:16  [ТС] 13
Eva Rosalene, https://codepen.io/qwerty_wasd/pen/zWVyXa
0
Eva Rosalene
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 2
15.04.2018, 23:19 14
Qwerty_Wasd, что из того вы понимаете под оригиналом?
0
Qwerty_Wasd
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 2
15.04.2018, 23:20  [ТС] 15
Eva Rosalene, то что я заменил тенью
0
Eva Rosalene
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 2
15.04.2018, 23:22 16
Qwerty_Wasd, не добавлять слот, тогда оригинал не будет виден.
0
Qwerty_Wasd
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 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, Я Вас наверное заколебал вопросами :) Я прошу прощения за занудство :rose: Очень хочется разобраться :help:

0
Eva Rosalene
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 2
16.04.2018, 00:15 18
Qwerty_Wasd, так вы же и хотите, чтобы детей не было на странице. Или вы про строчку "parent"?
0
Qwerty_Wasd
1206 / 883 / 439
Регистрация: 16.04.2016
Сообщений: 2,383
Завершенные тесты: 2
16.04.2018, 00:18  [ТС] 19
Цитата Сообщение от Eva Rosalene Посмотреть сообщение
Или вы про строчку "parent"?
да все верно )

Добавлено через 1 минуту
Мне казалось при добавлении слота он примет детей оригинала, а тень будет замещать. Видимо не так понял)
0
Eva Rosalene
T for Trans-
4051 / 1590 / 303
Регистрация: 06.01.2013
Сообщений: 4,182
Завершенные тесты: 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

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

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

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


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

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

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