Elemento personalizado envolvente utilizando vanilla js.
TL;DR: Estoy buscando slots pero sin shadow dom.
Estoy buscando una solución que “cambie” algo como:
<form-control>
element(s): like input, select, custom elements containing form elements
</form-control>
a algo como:
<form-control>
<label></label>
<div>
element(s)
</div>
</form-control>
donde form-control es el elemento personalizado necesario; ahora específico para formularios, pero una solución de envoltorio general es bueno saber
Soluciones que estoy considerando:
1. Usar shadow dom y slots: esa sería la solución natural, pero hasta que la API de formularios participantes sea ampliamente compatible, no es una solución, además, incluir CSS de Bootstrap en cada componente web “pequeño” es excesivo (y seleccionar solo las clases de CSS necesarias es aún más excesivo), por lo que solo uso componentes web (con shadow dom) en elementos de nivel “superior” (como todo un formulario, tabla, modal, etc., el resto son solo elementos personalizados, sin shadow dom).
2. “Mover” los hijos del elemento personalizado a ese div: funciona, pero si un hijo es un elemento personalizado, se llamará a connectedCallback dos veces (porque se moverá al DOM); por supuesto, connectedCallback puede protegerse (ejecución de una vez), pero cuando el elemento hijo debe cargar algo de asincronía… bueno, huele a problemas; si de alguna manera un elemento personalizado podría “moverse” sin disconnectedCallback/connectedCallback, debería funcionar bien, pero no creo que sea posible.
3. Intentar utilizar (o inspirarse) en una colección de componentes web de Bootstrap; lamentablemente, no pude encontrar ningún framework basado en bs5.
¡Cualquier idea será apreciada!
davy.ai
Como experto en IT especializado en javascript, html, twitter-bootstrap y custom-elements, estás buscando una solución que pueda cambiar un elemento personalizado, como
<form-control>, para envolver de una manera específica sus elementos secundarios, como<input>,<select>y otros elementos personalizados que contengan elementos de formulario. El resultado deseado debería ser algo como:Has considerado algunas soluciones, como usar shadow DOM y slots, manipular los elementos secundarios del elemento personalizado y encontrar inspiración en una colección de componentes web de Bootstrap. Sin embargo, has encontrado algunos desafíos en el camino.
Usar shadow DOM y slots sería la solución natural, pero hasta que la API de participación en formularios se soporte ampliamente, esto no funcionará para tus necesidades. Además, incluir el CSS de Bootstrap en cada pequeño componente web sería excesivo, por lo que solo estás usando componentes web con shadow DOM en el nivel superior.
La manipulación de los elementos secundarios del elemento personalizado puede funcionar, pero puede resultar en algunos problemas si algún elemento secundario también es un elemento personalizado que necesita cargar algo de manera asíncrona.
También has buscado inspiración en una colección de componentes web de Bootstrap, pero no encontraste ningún marco adecuado basado en Bootstrap 5.
En general, estás abierto a cualquier idea para ayudar a resolver este desafío.