Как получить доступ к внутренним полимерным элементам из внешнего полимерного элемента

Question

Я хочу определить новый элемент <my-table> С может содержать некоторое количество столбцы <mytable-col> Использование должно выглядеть примерно так:

<my-table id="mt1">
 <mytable-col id="c1" title ="name" type="string"width="150"></mytable-col>
 <mytable-col id="c2" title ="age" type="number" width="60"></mytable-col>
</my-table>

Можно ли определить элемент с другим (обязательным) новым "внутренним" элементом?Как можно получить доступ из кода дротика внешней разметке внутренний экземпляров элементов.

Если оба шаблона <my-table> и <mytable-col> содержать разметку, где - разметка внутреннего <mytable-col> вставили?

Answer 1

То, как вы написали свою разметку, <mytable-col> элементы являются дочерними элементами <my-table> которые добавляются к <content> узел внутри вашего <my-table> элемент.

Вы можете получить доступ к этим дочерним элементам из кода вашего <mytable-col> Нравится

var listContent = ($['content'] as ContentElement).getDistributedNodes();

Я не совсем понимаю, что вы имеете в виду под

Можно ли определить элемент с другим (обязательным) новым "внутренним" элементом?

Вы можете добавить код в свой enteredView() способ (после super.enteredView(); вызов, который проверяет, доступны ли нужные дочерние узлы в <content> узел и выдает исключение, если нет.

где находится разметка внутренней вставки?

Разметка вставляется в его элементы shadowDOM.
Разметка изменяет внешний вид вашего элемента, но обычно она не видна,
например, когда ваш открытый view source из вашего браузера (за исключением случаев, когда вы включаете опцию показывать shadowDOM в Chromium / Dartium или ваш браузер не поддерживает shadowDOM затем вы видите, как полифиллы пытаются подражать shadowDOM).

Вы можете сравнить его с такими тегами, как <video> где простое добавление этого тега создает множество элементов (таких как кнопки воспроизведения, остановки, продолжения, быстрой перемотки вперед и <span>ы и <div>ы для макета, добавляемые за кулисами, которые отвечают за макет и поведение <video> тег, но не видны в разметке.

Answer 2

с помощью @ Günter Zöchbauer, я нашел решение:

Как он написал, вы можете получить внутренний HTML с:

var listContent = ($['content'] as ContentElement).getDistributedNodes();

.

Поскольку это только находит узлы с идентификатором, вы определяете элемент в HTML компонента с идентификатором.

<content id = content><span>inner HTML</span></content>

.