Los componentes son los componentes básicos de las aplicaciones web modernas. ¿Qué prácticas recomendadas debes seguir cuando creas tus propios componentes para que puedan resistir el paso del tiempo?
Los componentes son los componentes básicos de las aplicaciones web modernas. ¿Qué prácticas recomendadas debes seguir cuando compilas tus propios componentes para que puedan resistir el paso del tiempo?
Elementos personalizados
Los elementos personalizados ofrecen a los desarrolladores la capacidad de extender el código HTML y crear sus propias etiquetas. Como los elementos personalizados se basan en estándares, se benefician del modelo de componentes integrados de la Web. Como resultado, obtienes un código más modular que se puede
reutilizar en muchos contextos diferentes.
Más información
Shadow DOM
Shadow DOM es un estándar web que ofrece estilo de componentes y encapsulamiento de lenguaje de marcado. Es una pieza fundamentalmente importante de la historia de los componentes web, ya que garantiza que un componente funcionará en cualquier entorno, incluso si hay otro CSS o JavaScript en la página.
Más información
Prácticas recomendadas
Debido a que los elementos personalizados y el shadow DOM son primitivas de bajo nivel, no siempre está claro cuál es la mejor manera de combinarlos para crear un componente que sea sólido y funcione bien en muchos entornos diferentes. Si bien puedes hacer prácticamente cualquier cosa con estas APIs, estas son algunas prácticas recomendadas que te ayudarán a garantizar que tus componentes funcionen bien en cualquier lugar.
Más información
Ejemplos
HowTo-Components son un conjunto de elementos que demuestran las prácticas recomendadas de elementos personalizados y Shadow DOM. Estos elementos no están destinados a usarse en producción, sino que se presentan como un asistente de enseñanza para ayudar a asignar sugerencias de prácticas recomendadas a implementaciones reales.
Más información
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2017-08-14 (UTC)"],[],[]]