Cómo acceder a los elementos poliméricos internos desde el elemento polimérico externo

Question

Quiero definir un nuevo elemento <my-table> con puede contener varias columnas <mytable-col>El uso debería verse así:

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

¿Es posible definir un elemento con otro elemento "interno" nuevo (requerido)?¿Cómo es posible acceder desde el código DART del exterior el marcado de las instancias de los elementos internos?

Si tanto la plantilla de <my-table> y <mytable-col> contienen marcado, ¿dónde está el marcado del interior? <mytable-col> ¿insertado?

Answer 1

La forma en que escribiste tu marcado <mytable-col> Los elementos son hijos de <my-table> que se añaden a la <content> nodo dentro de tu <my-table> elemento.

Puede acceder a esos elementos secundarios desde el código de su <mytable-col> como

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

No estoy seguro de lo que quieres decir con

¿Es posible definir un elemento con otro nuevo elemento "interno" (obligatorio)?

Puedes agregar código en tu enteredView() método (después del super.enteredView(); llamada que verifica que los nodos secundarios correctos estén disponibles en el <content> nodo y lanza una excepción si no.

¿Dónde está insertada la marca del interior?

El marcado se inserta en sus elementos. shadowDOM.
El marcado cambia la apariencia de su elemento pero normalmente no es visible,
por ejemplo cuando estás abierto view source desde su navegador (excepto cuando habilita la opción para mostrar shadowDOM en Chromium/Dartium o su navegador no soporta shadowDOM luego ves cómo los polyfills intentan emular shadowDOM).

Puedes compararlo con etiquetas como <video> donde simplemente agregar esta etiqueta crea muchos elementos (como botones de reproducción, parada, continuación, avance rápido y <span>arena <div>s para el diseño que se agregan detrás de escena y que son responsables del diseño y el comportamiento del <video> etiqueta pero no son visibles en el marcado.

Answer 2

con la ayuda de @Günter Zöchbauer encontré la solución:

Como escribió, puedes obtener el HTML interno con:

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

Debido a que esto solo encuentra Nodos con una identificación, también debe definir el Elemento en el HTML del Componente con una identificación.

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