[Custom Elements] Extension of arbitrary elements at runtime.

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

Received on Monday, 11 April 2016 03:12:55 UTC