<div dir="ltr"><div><a href="https://glitch.com/edit/#!/juniper-wool?path=index.html:40:7">https://glitch.com/edit/#!/juniper-wool?path=index.html:40:7</a><br></div><div><br></div><div>is an investigation of how HTML Imports and ShadowDOM may be used to substitute for X3D Inline nodes. HTML Imports makes it straightforward to load an external fragment of HTML into a document: <a href="https://www.webcomponents.org/community/articles/introduction-to-html-imports">https://www.webcomponents.org/community/articles/introduction-to-html-imports</a>. And the stated purpose of ShadowDOM is encapsulation. </div><div><br></div><div>Here are some observations:</div><div><br></div><div>HTML imports work as intended with x3dom.</div><div>It is likely one could use a generic 'include' webcomponent.</div><div>DEF nodes in the imported x3d are exported/imported, so they can be USEd. There is no separate namescope.</div><div>HTML imports can also be attached as shadow tree to a host node. But x3dom does not recognize the shadow tree and it is not rendered. Native X3D in HTML or an improved x3dom would likely render those.</div><div>Attached shadow tree content cannot be selected/found with regular DOM methods. However, shadow trees still can be selected with the host.shadowroot property. </div><div><br></div><div>It is likely that one could use en existing webcomponent such as</div><div><a href="https://www.webcomponents.org/element/github/include-fragment-element">https://www.webcomponents.org/element/github/include-fragment-element</a></div><div>for inline purposes as well.</div><div><br></div><div>Overall, it looks like that Inline would duplicate native webcomponent capability.</div><div><br></div><div>It could also be fruitful to investigate how custom elements with templates compare with protos in detail. There seems to be match in purpose and ability.</div><div><br></div><div>-Andreas</div><div><br></div><br clear="all"><div><br></div>--  <br><div class="gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</div>