HTML interactivo
13 pasos en 5 series de HTML.
Los elementos interactivos que la plataforma te da sin escribir una línea de JavaScript. Details y summary para revelar contenido, el elemento dialog con su fondo y su captura de foco, plantillas y elementos personalizados, arrastrar y soltar, y contenteditable.
Trece pasos, y varios de estos reemplazan bibliotecas que la gente sigue instalando. Un dialog nativo maneja el foco y la tecla Escape gratis, que es casi todo lo que hace accesible a un modal y casi todo lo que los hechos a mano hacen mal.
Desplegables y diálogos
- Paneles desplegablesDetails y summary te dan un acordeón sin nada de JavaScript.
- Un acordeón sin JavaScriptDale el mismo name a varios paneles y el navegador cierra los demás por ti.
- DiálogosUn modal nativo: el método del formulario lo cierra y devuelve un valor.
- PopoversDos atributos y el navegador maneja el cierre al clic afuera, la capa superior y el foco.
Plantillas y componentes
- TemplateMarcado que el navegador parsea pero no renderiza, a la espera de ser clonado.
- Un elemento personalizadoUna etiqueta tuya, con el comportamiento atado a la etiqueta y no a un selector.
- Shadow DOM y slotsEl componente es dueño de su marcado; la página, del contenido que va adentro.
Manipulación directa
- Regiones editablesCualquier elemento puede volverse un campo de texto: potente y rara vez lo que quieres.
- Arrastrar cosasUn atributo vuelve arrastrable un elemento; el resto son tres eventos.
Scripts e incrustaciones
- Cómo carga un scriptDónde está la etiqueta y qué atributo lleva deciden cuándo se detiene el parser.
- Poner un embed en sandboxUn iframe corre la página de otro dentro de la tuya, así que empieza sin permitir nada.
- Una página que respondePanel desplegable, popover, diálogo y una región viva en una página, sin framework.
Bis
- component_page.htmlUna página, cuatro comportamientos nativos: template, elemento personalizado, popover y diálogo.