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

[/#!/JoePea]

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  wrote:

>
>
> On Sun, Apr 10, 2016 at 11:11 PM, /#!/JoePea  > 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
>> 
>> 
>> 
>> ```
>>
>> 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:
>
> 
>   
> Hello
>   
>
>
> and the issue wanted to change it to
>
> 
>   
> Hello
>   
>
>
> Is there a reason it could it not just be
>
> 
>   
>   
> Hello
> 
> 
>
>
> There isn't really a significant difference between div and motor-scene to
> non-supporting browsers.
>
>
> --
> Brian Kardell :: @briankardell
>


-- 
/#!/JoePea

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

[Brian Kardell]

On Sun, Apr 10, 2016 at 11:11 PM, /#!/JoePea  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
> 
> 
> 
> ```
>
> 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:


  
Hello
  


and the issue wanted to change it to


  
Hello
  


Is there a reason it could it not just be


  
  
Hello




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


-- 
Brian Kardell :: @briankardell

[Custom Elements] Extension of arbitrary elements at runtime.

[/#!/JoePea]

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



```

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