From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/pt-pt/web/web_components/index.html | 227 ------------------------------ 1 file changed, 227 deletions(-) delete mode 100644 files/pt-pt/web/web_components/index.html (limited to 'files/pt-pt/web/web_components') diff --git a/files/pt-pt/web/web_components/index.html b/files/pt-pt/web/web_components/index.html deleted file mode 100644 index f84dbedcc3..0000000000 --- a/files/pt-pt/web/web_components/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Componentes da Web -slug: Web/Web_Components -tags: - - Artigo da Web - - Componentes - - Componentes da Web - - Desenvolvimento da Web - - Importações HTML - - JavaScript - - Landing - - Modelo - - Resumo - - Sinopse - - elementos personalizados - - shadow dom - - slot -translation_of: Web/Web_Components -original_slug: Web/Componentes_Web ---- -
{{DefaultAPISidebar("Componentes Web")}}
- -
- -
-

Componentes Web é uma suite de diferentes tecnologias que permite a criação de elementos reutilizáveis — com a sua funcionalidade encapsulada longe do restante código — E utilizá-las nas suas aplicações web.

-
- -

Conceitos e utilização

- -

Como programadores, todos sabemos que é boa ideia reutilizar código tanto como possível. Tradicionalmente, esta ideia não tem sido tão fácil para estruturas de marcação — pense no complexo HTML (e seus estilos e scripts associados) em que por vezes é necessário escrever controlos personalizados de UI e usá-los múltiplas vezes pode tornar a página numa desordem se não tiver cuidado

- -

Componentes Web visa resolver tais problemas — consiste em três grandes tecnologias, que usadas em conjunto, permitem criar elementos versáteis com funcionalidade encapsulada e que podem ser reutilizados onde se queira sem medo de colisões de código.

- - - -

The basic approach for implementing a web component generally looks something like this:

- -
    -
  1. Create a class or a function in which you specify your web component functionality. If using a class, use the ECMAScript 2015 class syntax (see Classes for more information). 
    2. -
  2. Register your new custom element using the {{domxref("CustomElementRegistry.define()")}} method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, what element it inherits from.
    3. -
  3. If required, attach a shadow DOM to the custom element using {{domxref("Element.attachShadow()")}} method. Add child elements, event listeners, etc., to the shadow DOM using regular DOM methods.
    4. -
  4. If required, define an HTML template using {{htmlelement("template")}} and {{htmlelement("slot")}}. Again use regular DOM methods to clone the template and attach it to your shadow DOM.
    5. -
  5. Use your custom element wherever you like on your page, just like you would any regular HTML element.
    6. -
- -

Tutoriais

- -
-
Using custom elements
-
A guide showing how to use the features of custom elements to create simple web components, as well as looking into lifecycle callbacks and some other more advanced features.
-
Using shadow DOM
-
A guide that looks at shadow DOM fundamentals, showing how to attach a shadow DOM to an element, add to the shadow DOM tree, style it, and more.
-
Using templates and slots
-
A guide showing how to define a reusable HTML structure using {{htmlelement("template")}} and {{htmlelement("slot")}} elements, and then use that structure inside your web components.
-
- -

Referência

- -

Elementos de Custom

- -
-
{{domxref("CustomElementRegistry")}}
-
Contains functionality related to custom elements, most notably the {{domxref("CustomElementRegistry.define()")}} method used to register new custom elements so they can then be used in your document.
-
{{domxref("Window.customElements")}}
-
Returns a reference to the CustomElementRegistry object.
-
Life cycle callbacks
-
Special callback functions defined inside the custom element's class definition, which affect its behavior: -
    -
  • connectedCallback: Invoked when the custom element is first connected to the document's DOM.
    • -
  • disconnectedCallback: Invoked when the custom element is disconnected from the document's DOM.
    • -
  • adoptedCallback: Invoked when the custom element is moved to a new document.
    • -
  • attributeChangedCallback: Invoked when one of the custom element's attributes is added, removed, or changed.
    • -
-
-
-
    -
-
-
- -
-
Extensions for creating custom built-in elements
-
-
    -
  • The {{htmlattrxref("is")}} global HTML attribute: Allows you to specify that a standard HTML element should behave like a registered custom built-in element.
    • -
  • The "is" option of the {{domxref("Document.createElement()")}} method: Allows you to create an instance of a standard HTML element that behaves like a given registered custom built-in element.
    • -
-
-
CSS pseudo-classes
-
Pseudo-classes relating specifically to custom elements: -
    -
  • {{cssxref(":defined")}}: Matches any element that is defined, including built in elements and custom elements defined with CustomElementRegistry.define()).
    • -
  • {{cssxref(":host")}}: Selects the shadow host of the shadow DOM containing the CSS it is used inside.
    • -
  • {{cssxref(":host()")}}: Selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.
    • -
  • {{cssxref(":host-context()")}}: Selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.
    • -
-
-
- -

Shadow DOM

- -
-
{{domxref("ShadowRoot")}}
-
Represents the root node of a shadow DOM subtree.
-
{{domxref("DocumentOrShadowRoot")}}
-
A mixin defining features that are available across document and shadow roots.
-
{{domxref("Element")}} extensions
-
Extensions to the Element interface related to shadow DOM: -
    -
  • The {{domxref("Element.attachShadow()")}} method attaches a shadow DOM tree to the specified element.
    • -
  • The {{domxref("Element.shadowRoot")}} property returns the shadow root attached to the specified element, or null if there is no shadow root attached.
    • -
-
-
Relevant {{domxref("Node")}} additions
-
Additions to the Node interface relevant to shadow DOM: -
    -
  • The {{domxref("Node.getRootNode()")}} method returns the context object's root, which optionally includes the shadow root if it is available.
    • -
  • The {{domxref("Node.isConnected")}} property returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.
    • -
-
-
{{domxref("Event")}} extensions
-
Extensions to the Event interface related to shadow DOM: -
    -
  • {{domxref("Event.composed")}}: Returns a {{jsxref("Boolean")}} which indicates whether the event will propagate across the shadow DOM boundary into the standard DOM (true), or not  (false).
    • -
  • {{domxref("Event.composedPath")}}: Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with {{domxref("ShadowRoot.mode")}} closed.
    • -
-
-
- -

Modelos de HTML

- -
-
{{htmlelement("template")}}
-
Contains an HTML fragment that is not rendered when a containing document is initially loaded, but can be displayed at runtime using JavaScript, mainly used as the basis of custom element structures. The associated DOM interface is {{domxref("HTMLTemplateElement")}}.
-
{{htmlelement("slot")}}
-
A placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. The associated DOM interface is {{domxref("HTMLSlotElement")}}.
-
The slot global HTML attribute
-
Assigns a slot in a shadow DOM shadow tree to an element.
-
{{domxref("Slotable")}}
-
A mixin implemented by both {{domxref("Element")}} and {{domxref("Text")}} nodes, defining features that allow them to become the contents of an {{htmlelement("slot")}} element. The mixin defines one attribute, {{domxref("Slotable.assignedSlot")}}, which returns a reference to the slot the node is inserted in.
-
- -
-
{{domxref("Element")}} extensions
-
Extensions to the Element interface related to slots: -
    -
  • {{domxref("Element.slot")}}: Returns the name of the shadow DOM slot attached to the element.
    • -
-
-
CSS pseudo-elements
-
Pseudo-elements relating specifically to slots: -
    -
  • {{cssxref("::slotted")}}: Matches any content that is inserted into a slot.
    • -
-
-
The {{event("slotchange")}} event
-
Fired on an {{domxref("HTMLSlotElement")}} instance ({{htmlelement("slot")}} element) when the node(s) contained in that slot change.
-
- -

Exemplos

- -

We are building up a number of examples in our web-components-examples GitHub repo. More will be added as time goes on.

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{SpecName("HTML WHATWG","scripting.html#the-template-element","<template> element")}}{{Spec2("HTML WHATWG")}}The definition of {{HTMLElement("template")}}.
{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}{{Spec2("HTML WHATWG")}}The definition of HTML Custom Elements.
{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}{{Spec2("DOM WHATWG")}}The definition of Shadow DOM.
{{SpecName("HTML Imports", "", "")}}{{Spec2("HTML Imports")}}Initial HTML Imports definition.
{{SpecName("Shadow DOM", "", "")}}{{Spec2("Shadow DOM")}}Initial Shadow DOM definition.
- -

Compatibilidade de navegador

- -

In general:

- - - -

For detailed browser support of specific features, you'll have to consult the reference pages listed above.

- -

Consulte também

- - -- cgit v1.2.3-54-g00ecf