Web Components é uma forma nativa que criar elementos reutilizáveis em aplicações web
Estrutura HTML simples e com elementos nativos
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<h1>A great document</h1>
<p>
With a great text
</p>
</body>
</html>light tree
- html
- head
- meta
- title
- body
- h1
- p
Estrutura HTML simples e com elementos nativos e um customizado
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<h1>A great document</h1>
<p>
With a great text
</p>
<ted-component>Olar</ted-component>
</body>
</html>light tree
- html
- head
- meta
- title
- body
- h1
- p
- ted-componentÉ uma arquivo como qualquer outra, mas ela é anexada a um elemento específico da light tree e não documento em si. Criando um novo contexto que não interage diretamente com os outros nós do documento.
class PopUpInfo extends HTMLElement {
constructor() {
// Sempre é necessário chamar o "super" no construtor
super();
// Aqui vc escreve seu componente
}
}const shadow = this.attachShadow({mode: 'open'});Elementos que usam o modo close não podem ter o shadow DOM acessados por
fora. Por exemplo:
closedCustomElement.shadowRoot; // returna `null`Por boa prática sempre use {mode: 'open'} para ajudar os amiguinhos