Componentes web en el mundo real (parte 2)

Ha pasado más de un año desde mi publicación "Componentes web en el mundo real" y he acumulado nuevas observaciones de lo que todavía está mal con esta tecnología. Quizás estos puntos le permitirán a alguien evitar un callejón sin salida para sus proyectos.

_{Foto de Brandon Molitwenik en Unsplash}

HTML roto

HTML tiene muchas características útiles que le permiten implementar funcionalidades sin usar JavaScript. Una de estas características es la capacidad de enviar un formulario presionando la tecla Enter en cualquier campo de entrada. He aquí un ejemplo:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <button>Send!</button>
</form>

Ingresamos el texto, presionamos Enter, los datos se envían al servidor, no JavaScript. Si lo desea, puede evitar recargar la página y enviar datos a través de AJAX, pero en este caso la cantidad de JS será mínima.

Ahora intentemos reemplazar un botón normal con un componente web:

<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <my-button>Send!</my-button>
</form>

El componente web my-buttoncontiene el mismo botón dentro de sí mismo, no hay diferencias visuales. ¡Pero enviar el formulario presionando Enter se rompió! Aquí hay una demostración que puede ver por sí mismo.

? -, . , . , : Javascript, , -. , - 8 , production-ready.

, -. HTML , label. , , . -! :

<label>First name: <input type="text"></label>
<label>Last name: <my-input></label>

, input "First name", "Last name" - . ! 2 , . – label input . , ? , - -, - ( , ShadowDOM).

CSP

" , ". CSP – , . CSP <style></style> , <link rel="stylesheet"> (, style- , 'unsafe-inline', , ).

-? , ShadowDOM , , ShadowDOM style-, CSP. - : Stencil () LitElement ().

– Constructable Stylesheets API, ShadowDOM unsafe-inline. – CSP, -.

Lifecycle-

, . , ( material-web-components):

<my-menu>
    <my-menu-item />
    <my-menu-item />
</my-menu>

- . connectedCallback. - DOM . , . :

class MyMenu extends HTMLElement {
    connectedCallback() {
        console.log('my menu')
    }
}

class MyMenuItem extends HTMLElement {
    connectedCallback() {
        console.log('my menu item')
    }
}

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

, :

"my menu"
"my menu item"
"my menu item"

connectedCallback , . , . , :

"my menu item"
"my menu item"
"my menu"

? my-menu ? HTML ,

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

// 
customElements.define('my-menu-item', MyMenuItem)
customElements.define('my-menu', MyMenu)

, connectedCallback. , , . " " , window.setTimeout . " " , . -

El componente web no podrá detener la renderización de los componentes internos del spoiler. Para cuando se active el componente, las imágenes internas ya comenzarán a cargarse y consumirán su tráfico, incluso si no desea abrir este spoiler.

conclusiones

Rastrillos esparcidos por todos los componentes web, ingeniosamente salpicado de marketing de Google. Todavía hay muchos problemas sin resolver en la norma que pueden resultar un obstáculo insuperable para sus proyectos. Sería útil conocer de antemano los posibles obstáculos para tomar una decisión más informada sobre si utilizar componentes web y marcos basados ​​en ellos, o seguir con el antiguo enfoque simple de HTML / JS / CSS. Espero que este artículo haya sido útil, ¡gracias por leer!