Will having a different node than and under invalidate the DOM?

Have the following document :

    

      

        ...
    
    
        ...
    
    
        ...
    

We're currently using a lml-template custom element with a {display: none} style. This templating zone contains various wrappers meant to be used later by the web application to generate "normal" mark-up under .

It contains user-defined mark-up used as templates for elements which will appear inside the body. We're using this method so that everything under the tag is concrete where everything under is abstract, but still queryable using document.querySelector.

Up until now, everything seems to be working fine, even on older-ish browsers.

According to this article, it is said that head is the first child of html, and body its last. I however couldn't find any documentation about the "accepted" children nodes of aside from those two little guys.

I know some browsers will fix incorrect markup such as non-

children of

, but it never tried to fix our code whatsoever.





CSS also doesn't seem to care at all since the elements are still in the DOM. Styles like :





lml-template {
    display: none;
}





will work just fine. Nothing else under lml-template needs styling since it's invisible.






Should I be worried about this? Is it bad practice? Worst case, we'll simply move the templates under body, and wrap everything else inside a second wrapper like so :





    

      
        ...
    

    
        

            ...
        

        

            ...
        
    






But it pretty much destroys the entire idea behind our library. Hopefully this is not only a "Google more" question.





Google queries used without success :






• custom html child node


• accepted html child node


• html child node not body head


• valid dom html children node







Thanks.





EDIT:





Just noticed that Skimlinks' Chrome plugin (affiliate marketing partner) also uses the same method, and it seems to work. It's not like we can take for granted that because they use this method, it becomes a good practice, but it's interesting.





Again, their markup will actually become visible at fixed positions (position: fixed;). They probably don't want their elements to interact with the current document. Maybe?

Answer

From the spec:

Content model:
A head element followed by a body element.

This means that the html element may only contain a head followed by a body, in that order, with no additional elements and both head and body must be there. (Their tags can be omitted for brevity, but the elements will still be generated in the DOM tree — one of the situations in which the distinction between tags and elements is important and why anyone who knows better will keep harping on it.)

If you're asking about validity in terms of the DOM tree representation of invalid markup, I'm not sure that can be measured in any meaningful way, since you're relying on invalid markup in the first place, even if the error recovery for said invalid markup is well-defined in the spec.

In fact, the spec does explain how markup appearing between the end tag and start tag should be handled, so the fact that Skimlinks seems to behave this way means Chrome knows something that we don't. Either way, it's certainly not something that should be relied on, since ultimately you're still working with invalid markup which is almost never good practice.

If you're interested in keeping your markup valid, I also recommend moving your element into body as its first child. That's exactly what the spec tells implementations to do, as revealed in the link above.