From b6580b050e7aaea273d6b41f0cda0fc3077afae2 Mon Sep 17 00:00:00 2001 From: Pablo Bion Date: Sun, 10 Oct 2021 20:21:37 -0300 Subject: Alterações solicitadas para tradução de custom element registry (#2533) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adicionando tradução para os topicos get, upgrade, define e whendefined de customelementregistry * Pequenos ajustes para novas paginas traduzidas --- .../api/customelementregistry/define/index.html | 284 +++++++++++++++++++++ .../web/api/customelementregistry/get/index.html | 61 +++++ .../api/customelementregistry/upgrade/index.html | 63 +++++ .../customelementregistry/whendefined/index.html | 106 ++++++++ 4 files changed, 514 insertions(+) create mode 100644 files/pt-br/web/api/customelementregistry/define/index.html create mode 100644 files/pt-br/web/api/customelementregistry/get/index.html create mode 100644 files/pt-br/web/api/customelementregistry/upgrade/index.html create mode 100644 files/pt-br/web/api/customelementregistry/whendefined/index.html (limited to 'files/pt-br/web/api') 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 +--- + +

{{APIRef("CustomElementRegistry")}}

+ +

+ O método define() da interface {{domxref("CustomElementRegistry")}} define um novo elemento personalizado. +

+ +

Dois tipos de elementos personalizados podem ser criados:

+ + + +

Sintaxe

+ +
+customElements.define(name, constructor, options);
+
+ +

Parâmetros

+ +
+
name
+
Nome do novo item personalizado. Observe que os nomes dos elementos personalizados devem conter um hífen.
+
constructor
+
Construtor para o novo elemento personalizado
+
options {{optional_inline}}
+
+ Um objeto que controla como o elemento é definido. Atualmente, apenas uma opção é permitida: +
    +
  • extends: String que especifica o nome do elemento pré-definido a partir do qual se estende. Usado para criarelementos personalizados pré-construídos.
    • +
+
+
+ +

Valor de retorno

+ +

Void.

+ +

Exceções

+ + + + + + + + + + + + + + + + + + + + + + +
ExceçãoDescrição
NotSupportedError + 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 + extends mas o elemento do qual você está tentando estender é desconhecido. +
SyntaxErrorO nome fornecido não é um nome de elemento personalizado válido.
TypeErrorO constructor referenciado não é um constructor
+ +
+

+ Nota: Exceções são frequentemente obtidas NotSupportedErrors quando o método define() está falhando, mas é realmente um problema relacionado a + {{domxref("Element.attachShadow()")}}. +

+
+ +

Exemplos

+ +

Elemento personalizado autônomo

+ +

+ O código a seguir é retirado do nosso exemplo popup-info-box-web-component (ver ao vivo). +

+ +
+// 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);
+
+ +
<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.">
+ +
+

Nota: Construtores de elementos personalizados autocontidos devem estender {{domxref("HTMLElement")}}.

+
+ +

Elemento personalizado pré-construído

+ +

+ O código a seguir é retirado do nosso exemplo word-count-web-component (ver ao vivo). +

+ +
+ 
+    // 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 HTMLElement, 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' });
+ +
<p is="word-count"></p>
+ +

Criando elemento que desativa a capacidade de utilizar attach no shadow root

+ +

+ 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`. +

+ +
+    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.
+        }
+      }
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Compatibilidade com navegadores

+ +
+

{{Compat("api.CustomElementRegistry.define")}}

+
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 +--- + +

{{APIRef("CustomElementRegistry")}}

+ +

+ O get() é um método de {{domxref("CustomElementRegistry")}} a interface retorna um construtor para um elemento personalizado previamente definido. +

+ +

Syntax

+ +
constructor = customElements.get(name);
+
+ +

Parâmetros

+ +
+
name
+
O nome do elemento personalizado cujo construtor você deseja retornar uma referência.
+
+ +

Valor de retorno

+ +

O construtor do elemento personalizado nomeado, ou undefinedse não há definição de elemento personalizado com esse nome.

+ +

Examples

+ +
+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');
+
+ +

Especificações

+ +{{Specifications}} + +

Compatibilidade com navegadores

+ +

{{Compat}}

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 +--- + +

{{APIRef("CustomElementRegistry")}}

+

+ O upgrade() é 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. +

+ +

Syntax

+ +
+customElements.upgrade(root);
+
+ +

Parâmetros

+ +
+
root
+
+ 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. +
+
+ +

Valor de retorno

+ +

Void.

+ +

Exemplos

+ +

Retirado de HTML spec:

+ +
+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!
+
+ +

Especificações

+ +{{Specifications}} + +

Compatibilidade com navegadores

+ +

{{Compat}}

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 +--- + +

{{APIRef("CustomElementRegistry")}}

+ +

+ O whenDefined() é um método de {{domxref("CustomElementRegistry")}} e a interface retorna uma {{jsxref("Promise")}} que é resolvido quando o elemento nomeado é + definido. +

+ +

Syntax

+ +
customElements.whenDefined(name): Promise<CustomElementConstructor>;
+ +

Parâmetros

+ +
+
name
+
Nome do elemento personalizado.
+
+ +

Valor de retorno

+ +

+ A {{jsxref("Promise")}} que será cumprida com o elemento personalizado's construtor quando um + custom element torna-se definido com o nome fornecido. (Se o custom element já foi + definido, a promessa devolvida será imediatamente cumprida.) +

+ +

Exceções

+ + + + + + + + + + + + + + +
ExceçãoDescrição
SyntaxError + Se o nome fornecido não for um nome de elemento personalizado válido, a promessa + rejeita com um SyntaxError. +
+ +

Exemplos

+ +

+ Este exemplo usa whenDefined() 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. +

+ +
+<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>
+
+ +
+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();
+
+ +

Specifications

+ +{{Specifications}} + +

Compatibilidade com navegadores

+ +

{{Compat}}

-- cgit v1.2.3-54-g00ecf