[x3d-public] HTML Imports and ShadowDOM experiments

[Andreas Plesch]

On Sat, Jul 22, 2017 at 4:01 PM, Andreas Plesch <andreasplesch at gmail.com>
wrote:

>
>
> On Fri, Jul 21, 2017 at 10:24 AM, Andreas Plesch <andreasplesch at gmail.com>
> wrote:
>
>>
>> ...
>> 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.
>>
>
> ...
> 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. ..
>

After writing this, I went ahead and tested this idea. It turns out that it
actually works (only for chrome):

https://glitch.com/edit/#!/tiny-fact?path=index.html:70:5 and Show Live.

I added a slotted template using this web3d example:
http://www.web3d.org/x3d/content/examples/Basic/X3dSpecifications/PrototypeIndex.html

The template has slots for a color field(attribute) and a material
field(element):
https://glitch.com/edit/#!/tiny-fact?path=table_template.html:12:7
https://glitch.com/edit/#!/tiny-fact?path=table_template.html:27:15

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:

https://glitch.com/edit/#!/tiny-fact?path=index.html:70:14

But it took a while to pin down the details.

It is interesting that it was natural to keep Prototype's nodeField and
fieldValue semantics.

For the instance: https://glitch.com/edit/#!/tiny-fact?path=index.html:30:1

<x3d-Group id="tablehost">
      <fieldValue slot="tableTopMaterialColor" value="1 1 1"></fieldValue>
 </x3d-Group>

and for the template (prototype):
https://glitch.com/edit/#!/tiny-fact?path=table_template.html:12:0

<Material DEF='TableTopMaterial' diffuseColor='.6 .6 .1'>
  <slot name='tableTopMaterialColor' nodeField='diffuseColor'>
     <fieldValue value='.6 .6 .1'></fieldValue> <!-- default -->
   </slot>

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:

https://glitch.com/edit/#!/tiny-fact?path=index.html:81:1

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.

So perhaps I was too pessimistic and in fact it may be possible to rely on
web components for prototype like functionality.

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.

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.

-Andreas

-- 
Andreas Plesch
39 Barbara Rd.
Waltham, MA 02453
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://web3d.org/pipermail/x3d-public_web3d.org/attachments/20170723/94595107/attachment.html>