<div dir="ltr"><br><div class="gmail_extra"><br><div class="gmail_quote">On Sat, Jul 22, 2017 at 4:01 PM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><br><div class="gmail_extra"><br><div class="gmail_quote">On Fri, Jul 21, 2017 at 10:24 AM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><br><div dir="ltr">...<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></blockquote><div><br></div>...<div>It may be possible to process the attached and populated template to replace slot elements with their corresponding assigned nodes. This leaves the first problem or parenting (a universal one !). One solution may be to move the shadow root nodes out and into the light dom under the shadow host. ..<br clear="all"></div></div></div></div></blockquote><div><br></div><div>After writing this, I went ahead and tested this idea. It turns out that it actually works (only for chrome):<br><br><a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:70:5">https://glitch.com/edit/#!/tiny-fact?path=index.html:70:5</a> and Show Live.<br><br></div><div>I added a slotted template using this web3d example:<br><a href="http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/PrototypeIndex.html">http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/PrototypeIndex.html</a><br></div><div><br></div><div>The template has slots for a color field(attribute) and a material field(element):<br><a href="https://glitch.com/edit/#!/tiny-fact?path=table_template.html:12:7">https://glitch.com/edit/#!/tiny-fact?path=table_template.html:12:7</a><br><a href="https://glitch.com/edit/#!/tiny-fact?path=table_template.html:27:15">https://glitch.com/edit/#!/tiny-fact?path=table_template.html:27:15</a><br><br></div><div>Cloning the template then into the root of shadow dom (attached to a group node) causes assignment of values to the named slots now in the shadow dom. One can then process these values to become actual x3dom field values. This does not require a lot of processing:<br><br><a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:70:14">https://glitch.com/edit/#!/tiny-fact?path=index.html:70:14</a><br><br></div><div>But it took a while to pin down the details.<br></div><div><br></div><div>It is interesting that it was natural to keep Prototype's nodeField and fieldValue semantics.<br></div><div><br></div><div>For the instance: <a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:30:1">https://glitch.com/edit/#!/tiny-fact?path=index.html:30:1</a><br><br><x3d-Group id="tablehost"><br>      <fieldValue slot="tableTopMaterialColor" value="1 1 1"></fieldValue><br> </x3d-Group><br></div><div><br></div><div>and for the template (prototype): <a href="https://glitch.com/edit/#!/tiny-fact?path=table_template.html:12:0">https://glitch.com/edit/#!/tiny-fact?path=table_template.html:12:0</a><br><br><Material DEF='TableTopMaterial' diffuseColor='.6 .6 .1'><br>  <slot name='tableTopMaterialColor' nodeField='diffuseColor'><br>     <fieldValue value='.6 .6 .1'></fieldValue> <!-- default --><br>   </slot> <br> <br></div><div>Since x3dom does not know how to deal with shadow dom, it is necessary to move the processed shadow dom into the light dom. But this requires only one line:<br><br><a href="https://glitch.com/edit/#!/tiny-fact?path=index.html:81:1">https://glitch.com/edit/#!/tiny-fact?path=index.html:81:1</a><br><br></div><div>The example is just for testing the process and does not make an attempt to generalize or wrap the process to be applied easily to any template. I do think wrapping this into a general ProtoInstance like web component/custom element is quite doable.<br></div><div><br></div></div><div class="gmail_quote">So perhaps I was too pessimistic and in fact it may be possible to rely on web components for prototype like functionality.<br><br><div class="gmail_quote">First, I want to check if modifying the slot value in a template instance gets picked up by x3dom. Probably not for attribute fields. hm.<br></div><br></div><div class="gmail_quote">The next step would be to see how to include scripts in templates. Script tags can be part of templates. They get executed when the template is instanced by cloning. Another place for scripting is in a custom element. Templates are often used with custom elements. A custom element would be the way to wrap the js in the example.<br><br></div>-Andreas<br></div><div class="gmail_extra"><div class="gmail_quote"><br></div>-- <br><div class="gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</div></div>