Как создать теневой корень внутри теневого корня

Я знаю, что это легко использовать полимер, но я хочу сделать это с помощью JavaScript

Теневой корень > Теневой корень > теневой корень


polymer shadow-dom
person soconfusing    schedule 15.09.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-shadow-multiple обсуждает несколько теневых корней.

<div id="example1">Light DOM</div>
<script>
  var container = document.querySelector('#example1');
  var root1 = container.createShadowRoot();
  var root2 = container.createShadowRoot();
  root1.innerHTML = '<div>Root 1 FTW</div>';
  root2.innerHTML = '<div>Root 2 FTW</div>';
</script>
person ebidel    schedule 15.09.2014
comment
Но как насчет вложенных? - person soconfusing; 15.09.2014
comment
Хост-узлы могут содержать несколько теневых корней. На самом деле нет понятия вложенности. Что вы пытаетесь сделать, и, возможно, я могу помочь объяснить это. Пример не помешал бы. - person ebidel; 15.09.2014
comment
У вас должна быть тень -> элемент -> тень -> элемент -> тень. IOW, тень не может содержать тень, но может содержать элемент с тенью. - person Scott Miles; 16.09.2014
comment
@ebidel: Скотт Майлз близок к ответу, который я ищу. Может ли теневой корень содержать другой теневой корень или это должно быть так? ‹Shadow Host› Shadow Root ‹Shadow Host2› Root 2 ‹/Shadow Host2› ‹/Shadow Host› Это должно быть больше похоже на Shadow › element › shadow › element и так далее, верно? А не Тень›Тень›Тень? - person soconfusing; 16.09.2014
comment
Элемент должен содержать теневой корень. Мой пример лучше виден на jsbin.com/zixakotiwepa/1/edit. Это показывает, что Polymer использует несколько теневых корней при расширении элементов. Если вы изучите элемент в devtools, вы увидите, что у полимерного охладителя есть 2 #shadow-roots. И удлинитель, и удлинитель имеют свои собственные теневые корни. - person ebidel; 17.09.2014
comment
Спасибо @ebidel и Скотт - person soconfusing; 23.09.2014