Message from JavaScript discussions

November 2018

— What effect you try to achive?

— 

If you think what I think you think, it is. It allows you to attach DOM fragments to it. The goal is to isolate the shadow DOM from the parent/host DOM. The main purpose is style isolation.

— My use case is rather complex. I’m rendering a full document inside another document. Currently, I manually inject the body contents into a certain element in the parent document’s body. Script, style and link tags are injected into the parent document’s head.

Message permanent page

— It would be far preferable to just have the document be a shadow DOM inside the parent document. This would automatically load any scripts/styles, but also isolate styles to the shadow DOM.

Message permanent page

— *But*, I believe my issue is less with shadow DOM. Atleast at this point in time. I try to store a full document as a document fragment so that I can append it later. This doesn’t seem to work with the template element, though.

Message permanent page

— Shadow dom, as i understand it, is designed to visually hide contents from developer, its not very useful, imo

Message permanent page

— Like, you implement your custom widget and hide the complexity from those who will use it

— Yes, it basically tries to make the markup untouchable. in a way.

— I’m just trying to explore whether I can still use it for my case.

— You can override css styles adding more specificity to the render point, i think it will be easier. i dont know.

Message permanent page

— That would require ne to actually touch and alter any CSS that I get. I’d like to avoid that as well. The ideal would be a completely independent document. I’m very far from that ideal as currently, we isolate styles by prefixing all selectors etc. That way, no styles leak out to the parent document, but styles from the parent document can still leak in.

Message permanent page

— Its not possible without re-parsing, i believe. the shortest way to adapt css, i see, is to wrap all rules in #id {...} of each css file of that doc, compile it on server side and then inject into document.styleSheets

Message permanent page