Como acessar os elementos poliméricos internos do elemento polimérico externo

Question

Quero definir um novo elemento <my-table> com pode conter várias colunas <mytable-col>O uso deve ficar assim:

<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>

É possível definir um elemento com outro (necessário) novo elemento "interno"?Como é possível acessar a partir do código DART do exterior a marcação das instâncias de elementos internos.

Se tanto o modelo de <my-table> e <mytable-col> contém marcação, onde está a marcação do interior <mytable-col> inserido?

Answer 1

A maneira como você escreveu sua marcação <mytable-col> elementos são filhos de <my-table> que são adicionados ao <content> nó dentro do seu <my-table> elemento.

Você pode acessar esses elementos filhos a partir do código do seu <mytable-col> como

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

Não tenho certeza do que você quer dizer com

É possível definir um elemento com outro novo elemento "interno" (obrigatório)?

Você pode adicionar código em seu enteredView() método (após o super.enteredView(); chamada que verifica se os nós filhos corretos estão disponíveis no <content> nó e lança uma exceção se não.

onde está a marcação do interior inserido?

A marcação é inserida em seus elementos shadowDOM.
A marcação altera a aparência do seu elemento, mas normalmente não é visível,
por exemplo, quando você está aberto view source do seu navegador (exceto quando você ativa a opção de mostrar shadowDOM no Chromium/Dartium ou seu navegador não suporta shadowDOM então você vê como os polyfills tentam emular shadowDOM).

Você pode compará-lo com tags como <video> onde apenas adicionar esta tag cria muitos elementos (como botões play-, stop-, continue-, fast-forward e <span>areia <div>s para o layout que são adicionados nos bastidores que são responsáveis ​​pelo layout e comportamento do <video> tag, mas não são visíveis na marcação.

Answer 2

com a ajuda de @Günter Zöchbauer encontrei a solução:

Como ele escreveu, você pode obter o HTML interno com:

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

Como isso só encontra Nodes com id, você deve definir o Elemento no HTML do Componente com um id também.

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