From ff74898359332ae844c2a982716beade37005c52 Mon Sep 17 00:00:00 2001 From: Gabriel Fernandes Silva Date: Thu, 9 Oct 2025 17:09:07 -0300 Subject: [PATCH 1/6] translate article --- 8-web-components/2-custom-elements/article.md | 339 ++++++++++-------- 1 file changed, 181 insertions(+), 158 deletions(-) diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md index a84ed1192..8a2e59b4f 100644 --- a/8-web-components/2-custom-elements/article.md +++ b/8-web-components/2-custom-elements/article.md @@ -1,81 +1,83 @@ +# Elementos customizados -# Custom elements +Podemos criar elementos HTML customizados, descritos por nossa classe, com seus próprios métodos e propriedades, eventos e assim por diante. -We can create custom HTML elements, described by our class, with its own methods and properties, events and so on. +Uma vez que um elemento customizado é definido, podemos usá-lo em paridade com elementos HTML nativos. -Once a custom element is defined, we can use it on par with built-in HTML elements. +Isso é ótimo, pois o dicionário HTML é rico, mas não infinito. Não existem ``, ``, ``... Pense em qualquer outra tag que possamos precisar. -That's great, as HTML dictionary is rich, but not infinite. There are no ``, ``, ``... Just think of any other tag we might need. +Podemos defini-los com uma classe especial, e então usá-los como se sempre fizessem parte do HTML. -We can define them with a special class, and then use as if they were always a part of HTML. +Existem dois tipos de elementos customizados: -There are two kinds of custom elements: +1. **Elementos customizados autônomos** -- elementos "completamente novos", estendendo a classe abstrata `HTMLElement`. +2. **Elementos nativos customizados** -- estendendo elementos nativos, como um botão customizado, baseado em `HTMLButtonElement` etc. -1. **Autonomous custom elements** -- "all-new" elements, extending the abstract `HTMLElement` class. -2. **Customized built-in elements** -- extending built-in elements, like a customized button, based on `HTMLButtonElement` etc. +Primeiro vamos cobrir elementos autônomos, e depois passar para os elementos nativos customizados. -First we'll cover autonomous elements, and then move to customized built-in ones. +Para criar um elemento customizado, precisamos informar ao navegador vários detalhes sobre ele: como mostrá-lo, o que fazer quando o elemento é adicionado ou removido da página, etc. -To create a custom element, we need to tell the browser several details about it: how to show it, what to do when the element is added or removed to page, etc. +Isso é feito criando uma classe com métodos especiais. É fácil, pois há apenas alguns métodos, e todos eles são opcionais. -That's done by making a class with special methods. That's easy, as there are only few methods, and all of them are optional. - -Here's a sketch with the full list: +Aqui está um esboço com a lista completa: ```js class MyElement extends HTMLElement { constructor() { super(); - // element created + // elemento criado } connectedCallback() { - // browser calls this method when the element is added to the document - // (can be called many times if an element is repeatedly added/removed) + // o navegador chama este método quando o elemento é adicionado ao documento + // (pode ser chamado muitas vezes se um elemento for repetidamente adicionado/removido) } disconnectedCallback() { - // browser calls this method when the element is removed from the document - // (can be called many times if an element is repeatedly added/removed) + // o navegador chama este método quando o elemento é removido do documento + // (pode ser chamado muitas vezes se um elemento for repetidamente adicionado/removido) } static get observedAttributes() { - return [/* array of attribute names to monitor for changes */]; + return [ + /* array de nomes de atributos para monitorar mudanças */ + ]; } attributeChangedCallback(name, oldValue, newValue) { - // called when one of attributes listed above is modified + // chamado quando um dos atributos listados acima é modificado } adoptedCallback() { - // called when the element is moved to a new document - // (happens in document.adoptNode, very rarely used) + // chamado quando o elemento é movido para um novo documento + // (acontece em document.adoptNode, muito raramente usado) } - // there can be other element methods and properties + // pode haver outros métodos e propriedades do elemento } ``` -After that, we need to register the element: +Depois disso, precisamos registrar o elemento: ```js -// let the browser know that is served by our new class +// deixe o navegador saber que é servido por nossa nova classe customElements.define("my-element", MyElement); ``` -Now for any HTML elements with tag ``, an instance of `MyElement` is created, and the aforementioned methods are called. We also can `document.createElement('my-element')` in JavaScript. +Agora para qualquer elemento HTML com tag ``, uma instância de `MyElement` é criada, e os métodos mencionados são chamados. Também podemos usar `document.createElement('my-element')` em JavaScript. -```smart header="Custom element name must contain a hyphen `-`" -Custom element name must have a hyphen `-`, e.g. `my-element` and `super-button` are valid names, but `myelement` is not. +```smart header="Nome do elemento customizado deve conter um hífen `-`" +O nome do elemento customizado deve ter um hífen `-`, por exemplo `my-element`e`super-button`são nomes válidos, mas`myelement` não é. -That's to ensure that there are no name conflicts between built-in and custom HTML elements. -``` +Isso é para garantir que não haja conflitos de nomes entre elementos HTML nativos e customizados. + +```` -## Example: "time-formatted" +## Exemplo: "time-formatted" -For example, there already exists `