polymer - ¿Los elementos personalizados requieren un guión en su nombre?

polymer material design

Question

¿Es posible nombrar sus propios elementos personalizados <date> , <person> , <city> u otros sin el uso de un guión? ¿Se puede usar definir elementos sin ellos?

Answer 1

Todos los navegadores admiten una lista finita de elementos HTML que se consideran "conocidos". Los elementos desconocidos (p. Ej., <city> , <person> ) generalmente no generan errores con el analizador HTML en los navegadores modernos y, en cambio, heredan de HTMLUnknownElement . Sin embargo, en versiones anteriores de IE, tales elementos se insertan en el DOM como un nodo vacío sin ningún elemento secundario (1).

La especificación de elementos personalizados requires que todos los elementos personalizados contengan un guión ( - ) en el nombre. Entonces, en lugar de <person> , usarías <my-person> o <x-person> . Estos son nombres válidos, mientras que <person > se considera un elemento desconocido.

El guión efectivamente permite que el analizador HTML diga la diferencia entre elementos personalizados verdaderos y elementos regulares. También nos permite habilitar un nivel de capacidad futura cuando los grupos de estándares agreguen nuevas etiquetas a HTML.

Puede usar cualquier nombre separado por guión con la excepción de:

• annotation-xml
• color-profile
• font-face
• font-face-src
• font-face-uri
• font-face-format
• font-face-name
• missing-glyph

Según mi conocimiento, estos nombres son nombres reservados de SVG, MathML y ​​otras especificaciones. Por ejemplo, aquí hay más info sobre el elemento <font-face> .

(1) Esto dio lugar al hack en el que los desarrolladores crearían una etiqueta HTML5 falsa en IE (por ejemplo, <article> ) utilizando JavaScript para que luego pudieran aplicarle estilo a cualquier elemento normal con CSS.