Custom elements support

[0Decoherence]

This transplies and works as expected (in chrome and opera and firefox since custom elements are fully implemented) but, if you paste it on the playground it will display some errors

             class View extends HTMLElement{

                createdCallback() {
                    var template = document.querySelector('#t1');
                    var clone = template.content.cloneNode(true);
                    var root = this.createShadowRoot();
                    root.appendChild(clone);
                    console.log("View created");
                }

                attachedCallback(){
                    console.log("View attached");
                }

                detachedCallback(){
                    console.log("View detached");
                }

                attributeChangedCallback(attrName,oldVal,newVale){
                    console.log(`attribute ${attrName} changed from ${oldVal} to ${newVale}`);
                }
            }

            document.registerElement('x-view', View);

those are:
1-A class may only extend another class.
2-Property content does not exist on type Element, Element is of type HTMLTemplate
3-createShadowRoot() does not exist on type View
4-registerElement does not exist in document definition..

[kitsonk]

There are a few things, first, you are trying to use a feature that is still draft and not yet officially part of the DOM. Therefore they won't likely be included in TypeScript until they are finalised. You will have to add the changes to the native types yourself.

Also, this relates to #1168 and while there are some ways around this, it needs a good solution to make what you are trying to do easy.

[danquirk]

@kitsonk pretty much covered what's happening here. Going to dupe this against #1168