Tengo algunos problemas con los métodos del ciclo de vida en los componentes web.
Queremos ordenar dinámicamente los elementos secundarios que se pasan como ranuras.
Para ilustrar, este componente web toma un apoyo, iconPos , y determinará si el icono se colocará al principio o al final de la ranura.
<my-component iconPos="start"> <img src="/path/icon.svg" /> <div>{this.list}</div> </my-component> No he tenido suerte para que funcione con ref :
dc6b89e7.js:2926 TypeError: Cannot read properties of undefined (reading 'prepend')
Esto es lo que tengo hasta ahora:
@State() slotElement!: HTMLDivElement; @Prop() iconPos: 'start' | 'end'; ... private createSlots() { switch (this.iconPos) { case 'start': this.slotElement.prepend(<img />); break; case 'end': this.slotElement.append(<img />); break; default: throw new Error( `Invalid value \`${this.iconPos}\`, passed into \`iconPos\`. Expected valid values are \`start\`, \`end\``. ); } } render() { return ( // iconPos="start" <parent-component> <div ref={(el) => (this.slotElement= el as HTMLDivElement)}> <slot></slot> </div> </parent-component> ) }Preferiría no usar una solución CSS si es posible. ¡Cualquier ayuda sería muy apreciada!
El contenido ranurado NO SE MUEVE a los elementos <slot> ; se refleja!!
Por lo tanto, todas las operaciones de estilo y elementos deben realizarse en "lightDOM"
Para una lectura (muy) larga, consulte: ::selector de CSS ranurado para niños anidados en la ranura shadowDOM
Eso significa que debe append sus elementos en ligtDOM con:
this.append(this.firstElementChild)
No puede leer el HTML interno <my-component> antes de que se analice; por lo que debe esperar hasta que se creen los elementos innerHTML. Por lo tanto, verá el cambio de DOM.
Un mejor método podría ser no usar <slot> y declarar su icono y contenido como atributos , y hacer que el componente web cree el HTML.
<style> span::after { content: attr(id) } #FOO { background: lightgreen } </style> <my-component> <span id="FOO"></span> <span id="BAR"></span> </my-component> <my-component reversed> <span id="FOO"></span> <span id="BAR"></span> </my-component> <script> window.customElements.define('my-component', class extends HTMLElement { constructor() { super().attachShadow({mode:'open'}) .innerHTML = `<style>::slotted(span){background:gold}</style> ${this.nodeName}<slot></slot><br>`; } connectedCallback() { setTimeout(() => { // make sure innerHTML is parsed! if (this.hasAttribute("reversed")) { this.append(this.firstElementChild); } }) } }); </script>