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

Hello Brian

The purpose of the motor-scene and motor-node elements is that they will be
easy to apply 3D transforms to (and WebGL soon), with easing for example. I
suppose a better approach for augmenting and existing DOM could be to
simply apply the transforms via selectors instead of trying to apply the
behavior via extending with is="". This wouldn't allow custom attributes
though, like extending would.

I think the best solution, for now, is as you recommended: to add the
layers if possible.

Thanks for the input!
- Joe

On Monday, April 11, 2016, Brian Kardell <bkardell@gmail.com> wrote:

>
>
> On Sun, Apr 10, 2016 at 11:11 PM, /#!/JoePea <trusktr@gmail.com
> <javascript:_e(%7B%7D,'cvml','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
>


-- 
/#!/JoePea