Re: [webcomponents]: Platonic form of custom elements declarative syntax

On Apr 11, 2013, at 7:57 AM, Erik Arvidsson wrote:

> Hi Allen,
> 
> ...
> 
> We initially had (plus/minus irrelevant details)
> 
> <element name="my-element">
>   <template>
>     This is my shadow DOM
>     <content></content>
>   </template>
>   <script>
>     class MyElement extends HTMLElement { ... }
>     // We need a convenient way to register ('my-element, MyElement) here
>   </script>
> </element>

So why don't you make "register" a static method on HTMLElement and then define the <element> semantics so it automatically does:
    MyElement.register()

This would normally invoke the inherited static method but it could be over-ridden for MyElement (but with a super call) to do other registration time initialization that was specific to MyElement.

The main outstanding issue I see is how does <element> determine that MyElement is the element class to register.   More on that below...



> 
> More inline...
> 
> On Thu, Apr 11, 2013 at 2:14 AM, Allen Wirfs-Brock <allen@wirfs-brock.com> wrote:
> 
> 
...
> Many details to work out, but I hope the intent is clear.  You just define a JS class corresponding to the template instances. There may be a standard template interface with methods such as withBond that are support.  Defaut implementations can be provided by a built-in super class.
> 

identifying the specific class to register from the script was one of the details I had in mind.

,,,

> This can all be expresses, but less clearly and concisely using ES3/5 syntax.  But since we are talking about a new HTML feature, I'd recommend being the first major HTMLfeature to embrace ES6 class syntax.  The class extension in ES6 are quite stable and quite easy to implement.  I'm pretty sure they will begin appearing in browsers sometime in the next 6 months. If webcomponents takes a dependency upon them, it would probably further speed up their implementation.
> 
> The problem here is how do you register `My_yay` as the class that goes with the tag name `my_yay`. One option could be to use the completion value but it seems too magical/unreliable.

I also thought that completion values would be too unreliable.  Within an element is a special context for a <script> so presumably you can use new attributes (or even tags).  Here is one thought on how to approach it:

<element name="my-scriptless">
  <template? ... </template>
</element>

the default built-in constructor for templated elements is used, 

> 

element name="my-foo" constructor="MyFoo">
  <template? ... </template>
</element>
> 


the value of the constructor attribute is a JS expression, so the constructor class is whatever MyFoo evaluates to in the global scope.

<element name="my-bar">
  <template? ... </template>
  <script constructor="MyBar">
       class MyBar extents HTMLElement { ... }
 </script>
</element>
> 


the nested script block provides the constructor name association and inline class definitions.  The script block is evaluated before the automatic registration call. 

<element name="my-baz">
  <template? ... </template>
  <script constructor="MyBaz" src="my-elements.js"> </script>
</element>
> 


the nested script block provides the constructor name and trigger the loader of a separate script resource.  If the script is already loaded, the registration occurs immediately , if not it is occurs after the script is loaded.  details...

Allen

Received on Thursday, 11 April 2013 16:24:11 UTC