diff options
Diffstat (limited to 'files/pt-br/web')
4 files changed, 514 insertions, 0 deletions
diff --git a/files/pt-br/web/api/customelementregistry/define/index.html b/files/pt-br/web/api/customelementregistry/define/index.html new file mode 100644 index 0000000000..86129551e5 --- /dev/null +++ b/files/pt-br/web/api/customelementregistry/define/index.html @@ -0,0 +1,284 @@ +--- +title: CustomElementRegistry.define() +slug: Web/API/CustomElementRegistry/define +translation_of: Web/API/CustomElementRegistry/define +--- + +<p>{{APIRef("CustomElementRegistry")}}</p> + +<p> + O método <code><strong>define()</strong></code> da interface {{domxref("CustomElementRegistry")}} define um novo elemento personalizado. +</p> + +<p>Dois tipos de elementos personalizados podem ser criados:</p> + +<ul> + <li><strong>Elementos personalizados autônomos</strong>: Elementos autônomos; estes herdam de HTMLElement (Elemento HTML genérico).</li> + <li> + <strong>Elementos personalizados pré-construídos</strong>: Estes elementos herdam - e estendem - elementos HTML já existentes (p.ej HTMLParagraphElement que é um elemento HTML + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p" title="The HTML <p> element represents a paragraph."><code><p></code></a + >). + </li> +</ul> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"> +customElements.define(<em>name</em>, <em>constructor</em>, <em>options</em>); +</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt>name</dt> + <dd>Nome do novo item personalizado. Observe que os nomes dos elementos personalizados devem conter um hífen.</dd> + <dt>constructor</dt> + <dd>Construtor para o novo elemento personalizado</dd> + <dt>options {{optional_inline}}</dt> + <dd> + Um objeto que controla como o elemento é definido. Atualmente, apenas uma opção é permitida: + <ul> + <li><code>extends</code>: String que especifica o nome do elemento pré-definido a partir do qual se estende. Usado para criar<em>elementos personalizados pré-construídos</em>.</li> + </ul> + </dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Void.</p> + +<h3 id="Excecoes">Exceções</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Exceção</th> + <th scope="col">Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>NotSupportedError</code></td> + <td> + El {{domxref("CustomElementRegistry")}} já contém uma entrada com o mesmo nome ou o mesmo construtor (ou já foi definido de alguma outra forma), ou foi especificado + <code>extends</code> mas o elemento do qual você está tentando estender é desconhecido. + </td> + </tr> + <tr> + <td><code>SyntaxError</code></td> + <td>O nome fornecido não é um <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">nome de elemento personalizado válido</a>.</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>O constructor referenciado não é um constructor</td> + </tr> + </tbody> +</table> + +<div class="note"> + <p> + <strong>Nota</strong>: Exceções são frequentemente obtidas <code>NotSupportedError</code>s quando o método <code>define()</code> está falhando, mas é realmente um problema relacionado a + {{domxref("Element.attachShadow()")}}. + </p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Elemento_personalizado_autônomo">Elemento personalizado autônomo</h3> + +<p> + O código a seguir é retirado do nosso exemplo <a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">popup-info-box-web-component</a> (<a + href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/" + >ver ao vivo</a + >). +</p> + +<pre class="brush: js"> +// Crie uma classe para o elemento +class PopUpInfo extends HTMLElement { + constructor() { + // Sempre a primeira coisa a fazer é chamar super no construtor + super(); + + // crie um shadow root + var shadow = this.attachShadow({mode: 'open'}); + + // Crie três elementos span + var wrapper = document.createElement('span'); + wrapper.setAttribute('class','wrapper'); + + var icon = document.createElement('span'); + icon.setAttribute('class','icon'); + icon.setAttribute('tabindex', 0); + + var info = document.createElement('span'); + info.setAttribute('class','info'); + + // Pegue o conteúdo do atributo de texto e coloque-o no span info + var text = this.getAttribute('text'); + info.textContent = text; + + // Pegue o conteúdo do atributo img (se existir) e coloque-o no ícone de span + var imgUrl; + if(this.hasAttribute('img')) { + imgUrl = this.getAttribute('img'); + } else { + imgUrl = 'img/default.png'; + } + + // A extensão não pode ter diretamente uma imagem, mas se contiver um elemento img + var img = document.createElement('img'); + img.src = imgUrl; + icon.appendChild(img); + + // Crie os estilos CSS e inclua-os no shadow DOM + var style = document.createElement('style'); + + style.textContent = '.wrapper {' + + 'position: relative;' + + '}' + + + '.info {' + + 'font-size: 0.8rem;' + + 'width: 200px;' + + 'display: inline-block;' + + 'border: 1px solid black;' + + 'padding: 10px;' + + 'background: white;' + + 'border-radius: 10px;' + + 'opacity: 0;' + + 'transition: 0.6s all;' + + 'position: absolute;' + + 'bottom: 20px;' + + 'left: 10px;' + + 'z-index: 3;' + + '}' + + + 'img {' + + 'width: 1.2rem' + + '}' + + + '.icon:hover + .info, .icon:focus + .info {' + + 'opacity: 1;' + + '}'; + + // anexar os elementos criados (extensões e estilo) ao shadow DOM + // observe que o span wrapper contém o ícone e os spans de informações + + shadow.appendChild(style); + shadow.appendChild(wrapper); + wrapper.appendChild(icon); + wrapper.appendChild(info); + } +} + + // Defina um novo elemento +customElements.define('popup-info', PopUpInfo); +</pre> + +<pre class="brush: html"><popup-info img="img/alt.png" text="O código de validação do seu cartão (CVC) é um recurso segurança extra - consiste em 3 ou 4 números no verso do seu cartão."></pre> + +<div class="note"> + <p><strong>Nota</strong>: Construtores de elementos personalizados autocontidos devem estender {{domxref("HTMLElement")}}.</p> +</div> + +<h3 id="Elemento_personalizado_preconstruido">Elemento personalizado pré-construído</h3> + +<p> + O código a seguir é retirado do nosso exemplo <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> (<a + href="https://mdn.github.io/web-components-examples/word-count-web-component/" + >ver ao vivo</a + >). +</p> + +<pre class="brush: js"> + + // Crie uma classe para o elemento +class WordCount extends HTMLParagraphElement { + constructor() { + // Sempre a primeira coisa a fazer é chamar super no construtor + super(); + + // contar palavras do pai deste elemento + var wcParent = this.parentNode; + + // A função countWords conta palavras (mesmo que sejam separadas por amis de um espaço) + // que existe no nó passado como parâmetro. + // innerText está definido para objetos <code>HTMLElement</code>, enquanto textContent para todos os objetos Node + // o operador || nos faz pegar pelo menos um dos dois + + function countWords(node){ + var text = node.innerText || node.textContent + return text.split(/\s+/g).length; + } + + var count = 'Words: ' + countWords(wcParent); + + // crie um shadow root + var shadow = this.attachShadow({mode: 'open'}); + + // Crie um nó span com o número de palavras + var text = document.createElement('span'); + text.textContent = count; + + // Adicione ao shadow root + shadow.appendChild(text); + + + // Atualize o contador quando o conteúdo do elemento mudar + setInterval(function() { + var count = 'Words: ' + countWords(wcParent); + text.textContent = count; + }, 200) + + } +} + +// Defina o novo elemento +customElements.define('word-count', WordCount, { extends: 'p' });</pre +> + +<pre class="brush: html"><p is="word-count"></p></pre> + +<h3>Criando elemento que desativa a capacidade de utilizar attach no shadow root</h3> + +<p> + Se a classe usada para o elemento contém a propriedade estática `disabledFeatures` retornando a string "shadow" isso fará com que {{domxref("Element.attachShadow()")}} retorne um + {{domxref("DOMException")}} `NotSupportedError`. +</p> + +<pre class="brush: js"> + class PopUpInfo extends HTMLElement { + static get disabledFeatures() { return ['shadow']; } + + constructor() { + super(); + + var shadow = this.attachShadow({mode: 'open'}); + // isso fará com que um erro seja lançado quando o elemento for definido. + } + } +</pre> + +<h2 id="Especificaciones">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_navegadores">Compatibilidade com navegadores</h2> + +<div> + <p>{{Compat("api.CustomElementRegistry.define")}}</p> +</div> diff --git a/files/pt-br/web/api/customelementregistry/get/index.html b/files/pt-br/web/api/customelementregistry/get/index.html new file mode 100644 index 0000000000..9d697769fb --- /dev/null +++ b/files/pt-br/web/api/customelementregistry/get/index.html @@ -0,0 +1,61 @@ +--- +title: CustomElementRegistry.get() +slug: Web/API/CustomElementRegistry/get +tags: + - API + - CustomElementRegistry + - Experimental + - Method + - Reference + - Web Components + - custom elements + - get +browser-compat: api.CustomElementRegistry.get +--- + +<p>{{APIRef("CustomElementRegistry")}}</p> + +<p> + O <code><strong>get()</strong></code> é um método de {{domxref("CustomElementRegistry")}} a interface retorna um construtor para um elemento personalizado previamente definido. +</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js"><em>constructor</em> = customElements.get(<em>name</em>); +</pre> + +<h3 id="Parameters">Parâmetros</h3> + +<dl> + <dt>name</dt> + <dd>O nome do elemento personalizado cujo construtor você deseja retornar uma referência.</dd> +</dl> + +<h3 id="Return_value">Valor de retorno</h3> + +<p>O construtor do elemento personalizado nomeado, ou <code>undefined</code>se não há definição de elemento personalizado com esse nome.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js"> +customElements.define('my-paragraph', + class extends HTMLElement { + constructor() { + let templateContent = document.getElementById('my-paragraph').content; + super() // returns element this scope + .attachShadow({mode: 'open'}) // sets AND returns this.shadowRoot + .append(templateContent.cloneNode(true)); + } +}) + +// Retorne uma referência ao construtor my-paragraph +let ctor = customElements.get('my-paragraph'); +</pre> + +<h2 id="Specifications">Especificações</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> + +<p>{{Compat}}</p> diff --git a/files/pt-br/web/api/customelementregistry/upgrade/index.html b/files/pt-br/web/api/customelementregistry/upgrade/index.html new file mode 100644 index 0000000000..203e4120b9 --- /dev/null +++ b/files/pt-br/web/api/customelementregistry/upgrade/index.html @@ -0,0 +1,63 @@ +--- +title: CustomElementRegistry.upgrade() +slug: Web/API/CustomElementRegistry/upgrade +tags: + - API + - CustomElementRegistry + - Method + - Reference + - Upgrade + - Web Components + - custom elements +browser-compat: api.CustomElementRegistry.upgrade +--- + +<p>{{APIRef("CustomElementRegistry")}}</p> +<p> + O <code><strong>upgrade()</strong></code> é um método de {{domxref("CustomElementRegistry")}} a interface atualiza todos os shadow-containing custom elements em um {{domxref("Node")}} da + subárvore, mesmo antes de estarem conectados ao principal documento. +</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js"> +customElements.upgrade(<em>root</em>); +</pre> + +<h3 id="Parameters">Parâmetros</h3> + +<dl> + <dt><code>root</code></dt> + <dd> + Uma instância de {{domxref("Node")}} com shadow-containing os elementos descendentes que serão atualizados. Se não houver elementos descendentes que possam ser atualizados, nenhum erro será + emitido. + </dd> +</dl> + +<h3 id="Return_value">Valor de retorno</h3> + +<p>Void.</p> + +<h2 id="Examples">Exemplos</h2> + +<p>Retirado de <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-upgrade">HTML spec</a>:</p> + +<pre class="brush: js"> +const el = document.createElement("spider-man"); + +class SpiderMan extends HTMLElement {} +customElements.define("spider-man", SpiderMan); + +console.assert(!(el instanceof SpiderMan)); // Ainda não atualizado + +customElements.upgrade(el); +console.assert(el instanceof SpiderMan); // Atualizado! +</pre> + +<h2 id="Specifications">Especificações</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> + +<p>{{Compat}}</p> diff --git a/files/pt-br/web/api/customelementregistry/whendefined/index.html b/files/pt-br/web/api/customelementregistry/whendefined/index.html new file mode 100644 index 0000000000..6480557933 --- /dev/null +++ b/files/pt-br/web/api/customelementregistry/whendefined/index.html @@ -0,0 +1,106 @@ +--- +title: CustomElementRegistry.whenDefined() +slug: Web/API/CustomElementRegistry/whenDefined +tags: + - API + - CustomElementRegistry + - Method + - Reference + - Web Components + - custom elements + - whenDefined +browser-compat: api.CustomElementRegistry.whenDefined +--- + +<p>{{APIRef("CustomElementRegistry")}}</p> + +<p> + O <code><strong>whenDefined()</strong></code> é um método de {{domxref("CustomElementRegistry")}} e a interface retorna uma {{jsxref("Promise")}} que é resolvido quando o elemento nomeado é + definido. +</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">customElements.whenDefined(<em>name</em>): Promise<CustomElementConstructor>;</pre> + +<h3 id="Parameters">Parâmetros</h3> + +<dl> + <dt>name</dt> + <dd>Nome do elemento personalizado.</dd> +</dl> + +<h3 id="Return_value">Valor de retorno</h3> + +<p> + A {{jsxref("Promise")}} que será cumprida com o <a href="/en-US/docs/Web/API/Window/customElements">elemento personalizado</a>'s construtor quando um + <a href="/en-US/docs/Web/API/Window/customElements">custom element</a> torna-se definido com o nome fornecido. (Se o <a href="/en-US/docs/Web/API/Window/customElements">custom element</a> já foi + definido, a promessa devolvida será imediatamente cumprida.) +</p> + +<h3 id="Exceptions">Exceções</h3> + +<table class="no-markdown"> + <thead> + <tr> + <th scope="col">Exceção</th> + <th scope="col">Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>SyntaxError</code></td> + <td> + Se o nome fornecido não for um <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">nome de elemento personalizado válido</a>, a promessa + rejeita com um <code>SyntaxError</code>. + </td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Exemplos</h2> + +<p> + Este exemplo usa <code>whenDefined()</code> para detectar quando os elementos personalizados que compõem um menu são definidos. O menu exibe o conteúdo do espaço reservado até que o conteúdo do + menu real esteja pronto para ser exibido. +</p> + +<pre class="brush: html"> +<nav id="menu-container"> + <div class="menu-placeholder">Loading...</div> + <nav-menu> + <menu-item>Item 1</menu-item> + <menu-item>Item 2</menu-item> + ... + <menu-item>Item N</menu-item> + </nav-menu> +</nav> +</pre> + +<pre class="brush: js"> +const container = document.getElementById('menu-container'); +const placeholder = container.querySelector('.menu-placeholder'); +// Busca todos os filhos do menu que ainda não foram definidos. +const undefinedElements = container.querySelectorAll(':not(:defined)'); + +async function removePlaceholder(){ + const promises = [...undefinedElements].map( + button => customElements.whenDefined(button.localName) + ); + + // Espere que todos os filhos sejam atualizados + await Promise.all(promises); + // em seguida, remova o espaço reservado + container.removeChild(placeholder); +} + +removePlaceholder(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> + +<p>{{Compat}}</p> |