выбранный вложенный полимерный элемент innerHTML отсутствует стиль

Question

В настоящее время я пытаюсь получить доступ к вложенному элементу. как я понимаю, хром поддерживает теневой РОМ, так что я могу получить доступ к внутренному HTML вложенного элемента, как этого

this.$.grade.$printable.root.innerHTML 

в светлячок, который использует теневой РОМ

this.$.grade.$printable.innerHTML 

проблема в случае светлячок innerHTML там отсутствует местный Dóm CSS в то время как в хроме он правильно делает

в любом случае, чтобы сохранить местный Dóm CSS при запросе элемента

пример

в хромовых

console.log(this.$.grade.root.innerHTML) 

возвращается

<style scope="grades-view">grades-printable { 
    display: none; 
} 

@media only print { 
grades-card, grades-table { 
    display: none; 
} 

grades-printable { 
    display: block; 
} 

}</style> 


    <iron-ajax auto="" handle-as="json" hidden=""></iron-ajax> 

    <grades-card></grades-card> 

в светлячок

console.log(this.$.grade.innerHTML) 

возвращается

<iron-ajax class="style-scope grades-view" auto="" handle-as="json" hidden=""></iron-ajax> 

<grades-card class="style-scope grades-view"></grades-card> 

Answer 1

Вы должны быть очень осторожны с тем, что вы делаете из-за проблемы с распределенными узлами (когда элемент <content> отображается внутри настраиваемого элемента <template>, этот контент заполняется формой заполнения (с точки зрения dom) узлов в другом месте в дереве dom. Вы должны использовать функции Polymer.dom(), чтобы управлять ими последовательно. См. Руководство для разработчиков для более полного объяснения и функций, которые предоставляются.