Diseño de componentes web

Nolan Lawson tiene un pequeño elemento selector de emojis que es tremendamente útil e increíblemente fácil de usar . Pero considerando que probablemente lo usarías dentro de tu propia aplicación, debería poder diseñarse para que pueda incorporarse bien en cualquier lugar. Cómo permitir ese estilo no es exactamente obvio:

Sin embargo, lo que no era obvio para mí era cómo permitir que los usuarios le dieran estilo. ¿Y si quisieran un color de fondo diferente? ¿Y si quisieran que el emoji fuera más grande? ¿Qué pasaría si quisieran una fuente diferente para el campo de entrada?

Nolan enumera cuatro posibilidades (les cambiaré el nombre un poco de una manera que me ayude a entenderlas).

1. Propiedades personalizadas de CSS: aplique estilo a elementos como background: var(--background, white);. Las propiedades personalizadas penetran el Shadow DOM, por lo que básicamente estás agregando ganchos de estilo.
2. Variaciones prediseñadas: puede agregar un classatributo a los elementos personalizados, a los que se puede acceder fácilmente dentro de CSS dentro de Shadow DOM gracias a los pseudo selectores, como :host(.dark) { background: black; }.
3. Partes de sombra: agrega atributos a las cosas que desea que se puedan diseñar, como span part="foo", luego CSS desde el exterior puede llegar a me gusta custom-component::part(foo) { }.
4. Obligado por el usuario: a pesar de la sensación de nada dentro/nada fuera del Shadow DOM, siempre puedes alcanzar element.shadowRoote inyectar un style, por lo que siempre hay una manera de introducir estilos.

Probablemente valga la pena mencionar que el DOM que slotinstaló se puede aplicar estilo desde CSS “externo”, por así decirlo.

Este es un problema tan extraño. Me gusta Shadow DOM porque es lo más parecido que tenemos en la plataforma web a los estilos con alcance, lo cual definitivamente es una buena idea. Pero no me encanta ninguna de esas soluciones de estilo. Todos parecen obligarme a pensar qué tipo de API de estilo quiero ofrecer y documentarlo, sin fomentar ninguna coherencia particular entre los componentes.

Para mí, el DOM ya es una API de estilo. Me gusta la protección con alcance, pero debería haber una manera fácil de llegar allí y diseñar las cosas si así lo deseo. Parece que debería haber una manera CSS muy simple de llegar al interior y seguir usando la cascada y demás. ¿Quizás el nombre del elemento personalizado separado por guiones sea suficiente? my-custom-elemement li { }. O tal vez sea más explícito, como @shadow my-custom-element li { }. Simplemente creo que debería ser más fácil. Las hojas de estilo construibles tampoco parecen un paso para hacerlo más fácil.

La última vez que pensé en diseñar componentes web , simplemente estaba tratando de descubrir cómo funciona en primer lugar, sin considerar cómo exponer las opciones de estilo a los consumidores del componente.

¿Esto realmente supone un problema en el trabajo diario? Seguro que lo hace.

Hola, amigos de Web Component, estoy modernizando mi antiguo elemento personalizado podcast-player (ahora creado con lit-element y tiene mejor a11y y TimeJumping), pero lo dejé como PR porque tengo algunas preguntas sobre cómo mejorar abordar el estilo y la personalización. https://t.co/UecDytLUgF

– Dave Rupert (@davatron5000) 20 de enero de 2021

No veo ninguna opción particularmente buena en ese hilo (todavía) para el enfoque de estilo. Si yo fuera Dave, estaría tentado a no hacer nada. Ofrezca un estilo mínimo y, si las personas quieren diseñarlo, pueden hacerlo como quieran desde su copia del componente. O pueden “forzar” los estilos, lo que significa que tienes total libertad.