Полимер. Внутренние элементы, видимые в браузере Chrome.

Question

Я только начал изучать Полимер, и я работал над их документами. Я создал очень простой Hello World элемент, который, кажется, работает для меня:

<link rel="import" href="/path/to/polymer/polymer.html"> 

<dom-module id="test-element"> 
    <template> 
     <style> 
      p { 
       color: blue; 
      } 
     </style> 
     <p>Hello [[name]]!</p> 
    </template> 
    <script> 
     Polymer({ 
      is: 'test-element', 
      properties: { 
       name: String 
      } 
     }); 
    </script> 
</dom-module> 

я могу импортировать и использовать элемент на успешно странице:

<link rel="import" href="/path/to/my/test-element.html"> 
<test-element name="World"></test-element> 

Это правильно показывает синий «р ', говорящий «Hello World!», и я также вижу, что стилизация CSS на элементе правильно не сливается с другими элементами «p» на странице вне элемента.

Пока все хорошо. Однако в документах, которые я читал, одним из преимуществ веб-компонента является то, что его внутренние детали реализации скрыты от основного дерева DOM. Их приведенный пример был элементом «видео», в котором есть другие элементы внутри него, но вы не можете напрямую их запросить.

В инструментах разработчика Chrome, однако, я могу видеть элемент «p» в дереве DOM внутри моего «тестового элемента». Я могу даже запросить его с JQuery, который я думал, что я не должен был быть в состоянии сделать:

$("test-element p") 
// Produces: [ <p class="style-scope test-element">Hello World!</p> ] 

я делаю что-то неправильно, или я не понял, как Polymer работает?

Answer 1

Причина того, что вы видите, - shady-dom. Полимер по умолчанию реализует shady-dom вместо shadow-dom (также причины, почему мы используем lite версию webcomponentsjs, нет теневого дома настоящего), как из 3-х основных браузеров (Chrome, Safari и Firefox) в настоящее время только хром имеет поддержки и shadow-dom и использование shadow-dom из polyfill(webcomponentsjs) очень дорого (и некоторые другие причины). shady-dom имеет свои собственные недостатки, которые включают в себя тот, который вы наблюдали, и некоторые другие. Вы можете узнать больше о shadow и shady dom here.

Примечание: Вы все еще можете увидеть shadow-dom «s внутренний элемент в вашем chrome dev-tool, если вы включите Show user agent shadow DOM опцию в настройках devtool, но на этот раз с другой структурой NodeList.

Для тех браузеров, которые делают его поддержку (т.е. Chrome), вы можете включить тень DOM, когда он присутствует, установив глобальный «дом» Полимерные установки в «тень» (см Polymer Docs для более подробной информации):

window.Polymer = { 
    dom: 'shadow' 
};