Estender elementos nativos do html com Angular 2

Web components são 4 especificações e o Angular suporta uma delas, o shadow dom. Você pode encapsular qualquer tag html dentro do seu componente.

Entendi. Então o Angular 2 não implementa o custom element ?

O que eu queria fazer é : ter o meu componente angular input <meu-input-text> estendendo o <input> do html nativo. Mais ou menos esse código dentro do meu template : <input is='meu-input'> .

Pois estendendo eu teria todas os eventos e funcionalidades do input nativo customizado com a minha implementação.

É possível isso ? Ou só com um Polymer da vida...

Você pode fazer algo semelhante mas não do jeito que você aprendeu com polymer.

No curso você criará, por exemplo, seu proprio botão.

Entendi. Desculpa a insistência. Mas, quando criamos o nosso próprio botão em angular 2, nós teremos que implementar tudo que aquele botão pode fazer, certo ? Por exemplo no meu botão angular 2 eu implementei o evento de click, ou seja, sempre que o usuário clicar no meu botão eu capturo o evento e faço algo com o evento. Mas, se amanhã quem estiver usando o meu botão feito em angular 2, quiser usar o evento de on mouse over, eu terei que alterar o meu componente e implementar esse evento, certo ?

Se eu tivesse uma maneira de herder os comportamento do botão nativo do html, eu poderia apenas customizar o meu botão, sem precisar me preocupar em implementar no meu botão em angular 2 tudo que o botão nativo do html já tem.

É possível fazer isso?

Normal estar ansioso para saber mais, mas faça o treinamento até o fim que muitas duvidas serão sanadas.

Você pode fazer isso sim, se você saca de polymer deve saber que há o host element é o mesmo conceito.

Aliás o Angular 2 só suporta apenas shadow Dom porque as outras 3 partes da especificação não chegaram a um denominador comum. O polymer atua como polyfill e se as specs mudarem você precisará atualizar o polymer.

A equipe do Angular 2 só abraçou o shadow dom por causa disso, porque a spec shadow dom foi consolidada.