this.document refers to the component element when used in Light DOM mode which can be confusing
Following a documentation discussion, this ticket is opened to discussion and external opinions.
To improve readability, here is the discussion:
@mlbiche: I find the
documentname confusing. IMHO, it should bethis.elementinstead, asthis.documentdoes not correspond at all todocumentwhen Shadow DOM is disabled.@vinyll: it's called
this.documentas it does refer to the document of the current element.this.documenthas all the same methods of window.document such asquerySelector,children… Indeed when Shadow DOM is disabled it refers to the element itself. Correct me if I'm wrong but it still is a DOM inheritance element as for window.document. If that is not the cas we should rather fixthis.documentthat must refer to the document of the element in case of Light DOM as well.@mlbiche: Indeed, but
this.document.querySelectorAll('a')will only get<a>tags inside the component, whiledocument.querySelectorAll('a')will get all<a>tags within the HTML document. It can lead to confusion, can't it?@vinyll: calling it
this.documentis explicitely a document that belong to this. Therefore you may know and expect it to have the behavior ofwindow.documentfor the current component and not for the window. The purpose of components is to scope the dom, styles… therefore it makes sense to me to access the current component from within the component and not gain access to the upper or lower outside. Accessing the outside document could maybe be reached via window.document? However I would advice never to do that unless some specific documented hacking the system.@mlbiche: Yes, of course,
window.document, or even justdocument, allows reaching the outside document. For me, it's not such a hacky approach. For example, it is useful to spread a state through the whole application if you don't want to use a store. A good illustration is detailed in Modest JS e-book. But, anyway, I understand your point of view, we will let it as is. 👌