¿Etiquetas personalizadas de cierre automático/desapareamiento en HTML?

Question

El siguiente código [jsfiddle] ...

var div = document.createElement("div"); 
div.innerHTML = "<foo>This is a <bar /> test. <br> Another test.</foo>"; 
alert(div.innerHTML); 

... muestra esta estructura analizada:

<foo>This is a <bar> test. <br> Another test.</bar></foo> 

es decir, el navegador sabe que <br> no tiene etiqueta de cierre pero desde <bar> es una etiqueta desconocida para el navegador, supone que necesita una etiqueta de cierre.

sé que el (solidus) sintaxis /> se ignora en HTML5 y válida en HTML 4, pero de todos modos le gustaría enseñar alguna manera el navegador que <bar> no necesita una etiqueta final y puedo omitirlo. ¿Es eso posible?

Sí, estoy tratando de (temporalmente) hacer mal uso del código HTML para etiquetas personalizadas y tengo mis razones específicas para hacerlo. Después de todo, los navegadores deberían ignorar las etiquetas desconocidas y tratarlas como etiquetas en línea sin estilo, por lo que no debería romper nada siempre que pueda asegurarme de que los nombres de las etiquetas nunca se utilizarán en estándares HTML reales.

Answer 1

Habría que utilizar Object.defineProperty en HTMLElement.prototype para anular el colocador innerHTML y getter con su propia implementación innerHtml que trata a los elementos que desea como void. Mire here para saber cómo innerHTML y el analizador HTML se implementan por defecto.

Tenga en cuenta que Firefox apesta a herencia cuando se trata de definir cosas en HTMLElement.prototype donde se filtra a HTMLDivElement por ejemplo. Sin embargo, las cosas deberían funcionar bien en Opera.

En otras palabras, qué elementos son vacíos depende del analizador HTML. El analizador sigue this list y innerHTML usa las mismas reglas principalmente.

Por lo tanto, en otras palabras, a menos que desee crear su propia implementación innerHTML en JS, probablemente debería olvidarse de esto.

Puede usar el live DOM viewer para mostrar a otros cómo se analiza cierto marcado. Probablemente notará que las mismas etiquetas finales cerrarán implícitamente el elemento abierto.

Tengo un obsoleto internalHTML getter (no setter) código here que utiliza una lista de elemento void. Eso puede darte algunas ideas. Pero, escribir una implementación setter puede ser más difícil.

Por otro lado, si usa createElement() y appendChild() etc. en lugar de innerHTML, no debería tener que preocuparse por esto y el getHTML interno nativo generará los elementos desconocidos con etiquetas finales.

en cuenta sin embargo, se puede tratar el elemento desconocido como XML y utilizar XMLSerializer() y DOMParser() para hacer las cosas:

var x = document.createElement("test"); 
var serializer = new XMLSerializer(); 
alert(serializer.serializeToString(x)); 
var parser = new DOMParser(); 
var doc = parser.parseFromString("<test/>", "application/xml"); 
var div = document.createElement("div"); 
div.appendChild(document.importNode(doc.documentElement, true)); 
alert(serializer.serializeToString(div)); 

No es exactamente lo que quiere, pero algo que se puede jugar. (Prueba eso en Opera en lugar de Firefox para ver la diferencia con los atributos xmlns. También ten en cuenta que Chrome no funciona como Opera y Firefox.)