Re: [Custom Elements] Extension of arbitrary elements at runtime.

On Sun, Apr 10, 2016 at 11:11 PM, /#!/JoePea <trusktr@gmail.com> wrote:

> The is="" attribute lets one specify that some element is actually an
> extended version of that element.
>
> But, in order for this to work, the Custom Element definition has to
> deliberately extend that same basic element type or else it won't
> work.
>
> It'd be nice if a Custom Element definition could be arbitrarily
> applied to any type of element, with the is="" tag for example, and
> that the element would then be upgraded to the extending type at
> runtime. The custom element could be told what class it is extending
> at runtime in order to perhaps act differently using conditional
> statements.
>
> So, writing defining the element could be like this:
>
> ```js
> let isDynamic = true
> document.registerElement('some-element', {
>   createdCallback: function() {
>     if (this.typeExtended == 'DIV")
>       // ...
>     if (this.typeExtended == 'BUTTON')
>       // ...
>   },
> }, isDynamic)
> ```
>
> then using the element could be like this:
>
> ```html
> <div is="some-element"></div>
> <button is="some-element"></button>
> <p is="some-element"></p>
> ```
>
> What are your thoughts on such a way to extend any type of element at
> runtime? Could it be a way for augmenting, for example, an existing
> app without necessarily having to modify it's markup, just simply
> adding is="" attributes as needed? Would this make things too
> complicated?
>
> The real reason I thought of this idea is because:
> https://github.com/infamous/infamous/issues/5
>
> There might be a better way, but thought I'd mention it just in case
> it sparks any ideas.
>
> Cheers!
> - Joe
>
> /#!/JoePea
>
>

Is there a reason that you cannot wrap with fallback?  For example, in your
github issue you are given and existing app with markup like:

<div>
  <div id="foo">
    <h1>Hello</h1>
  </div></div>


and the issue wanted to change it to

<div is="motor-scene" ...>
  <div id="foo" is="motor-node" ...>
    <h1>Hello</h1>
  </div></div>


Is there a reason it could it not just be

<motor-scene ...>
  <motor-node>
    <!-- original/fallback content -->      <div id="foo" ...>
        <h1>Hello</h1>
      </div>  </motor-node>
</motor-scene>


There isn't really a significant difference between div and motor-scene to
non-supporting browsers.


-- 
Brian Kardell :: @briankardell