You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/migration/custom-elements-interop.md
+40-40Lines changed: 40 additions & 40 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,41 +3,41 @@ badges:
3
3
- breaking
4
4
---
5
5
6
-
# Custom Elements Interop <MigrationBadges:badges="$frontmatter.badges" />
6
+
# Interop. de Elementos Personalizados <MigrationBadges:badges="$frontmatter.badges" />
7
7
8
-
## Overview
8
+
## Visão Geral
9
9
10
-
-**BREAKING:**The checks to determine whether tags should be treated as custom elements are now performed during template compilation, and should be configured via compiler options instead of runtime config.
10
+
-**QUEBRA:**As verificações para determinar se as tags devem ser tratadas como elementos personalizados agora são executadas durante a compilação do _template_ e devem ser configuradas por meio de opções do compilador em vez de configuração em tempo de execução.
11
11
-**QUEBRA:** O uso do atributo especial `is` é restrito apenas à tag reservada `<component>`.
12
-
-**NEW:**To support 2.x use cases where `is`was used on native elements to work around native HTML parsing restrictions, prefix the value with`vue:`to resolve it as a Vue component.
12
+
-**NOVO:**Para suportar casos de uso da v2.x onde `is`foi usado em elementos nativos para contornar restrições da análise de HTML nativo, prefixe o valor com`vue:`para resolvê-lo como um componente Vue.
13
13
14
-
## Autonomous Custom Elements
14
+
## Elementos Personalizados Autônomos
15
15
16
-
If we want to add a custom element defined outside of Vue (e.g. using the Web Components API), we need to 'instruct' Vue to treat it as a custom element. Let's use the following template as an example.
16
+
Se quisermos adicionar um elemento personalizado definido fora do Vue (ex.:, usando a API de _Web Components_), precisamos 'instruir' o Vue a tratá-lo como um elemento personalizado. Vamos usar o _template_ a seguir como exemplo.
17
17
18
18
```html
19
19
<plastic-button></plastic-button>
20
20
```
21
21
22
-
### 2.x Syntax
22
+
### Sintaxe v2.x
23
23
24
-
In Vue 2.x, configuring tags as custom elements was done via `Vue.config.ignoredElements`:
24
+
No Vue 2.x, a configuração de tags como elementos personalizados era feita via `Vue.config.ignoredElements`:
25
25
26
26
```js
27
-
//This will make Vue ignore custom element defined outside of Vue
28
-
// (e.g., using the Web Components APIs)
27
+
//Isso fará com que o Vue ignore o elemento personalizado definido fora do Vue
28
+
// (ex.: usando as APIs de Web Components)
29
29
30
30
Vue.config.ignoredElements= ['plastic-button']
31
31
```
32
32
33
-
### 3.x Syntax
33
+
### Sintaxe v3.x
34
34
35
-
**In Vue 3.0, this check is performed during template compilation.**To instruct the compiler to treat`<plastic-button>`as a custom element:
35
+
**No Vue 3.0, esta verificação é realizada durante a compilação do _template_.**Para instruir o compilador a tratar`<plastic-button>`como um elemento personalizado:
36
36
37
-
-If using a build step: pass the `isCustomElement`option to the Vue template compiler. If using `vue-loader`, this should be passed via `vue-loader`'s `compilerOptions`option:
37
+
-Se estiver usando uma etapa de compilação: passe a opção `isCustomElement`para o compilador de _templates_ do Vue. Se estiver usando `vue-loader`, isso deve ser passado através da opção `compilerOptions`do `vue-loader`:
-If using on-the-fly template compilation, pass it via `app.config.isCustomElement`:
55
+
-Se estiver usando a compilação de _template__on-the-fly_, passe-o via `app.config.isCustomElement`:
56
56
57
57
```js
58
58
constapp=Vue.createApp({})
59
59
app.config.isCustomElement=tag=> tag ==='plastic-button'
60
60
```
61
61
62
-
It's important to note the runtime config only affects runtime template compilation - it won't affect pre-compiled templates.
62
+
É importante observar que a configuração em tempo de execução afeta apenas a compilação do _template_ em tempo de execução - não afetará os _templates_ pré-compilados.
63
63
64
-
## Customized Built-in Elements
64
+
## Elementos Integrados Personalizados
65
65
66
-
The Custom Elements specification provides a way to use custom elements as [Customized Built-in Element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)by adding the`is`attribute to a built-in element:
66
+
A especificação de Elementos Personalizados fornece uma maneira de usar elementos personalizados como um [Elemento Integrado Personalizado](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)adicionando o atributo`is`a um elemento interno:
67
67
68
68
```html
69
-
<buttonis="plastic-button">Click Me!</button>
69
+
<buttonis="plastic-button">Clique em mim!</button>
70
70
```
71
71
72
-
Vue's usage of the `is`special attribute was simulating what the native attribute does before it was made universally available in browsers. However, in 2.x it was interpreted as rendering a Vue component with the name `plastic-button`. This blocks the native usage of Customized Built-in Element mentioned above.
72
+
O uso do atributo especial `is`pelo Vue estava simulando o que o atributo nativo faz antes de ser disponibilizado universalmente nos navegadores. No entanto, na v2.x foi interpretado como renderizando um componente Vue com o nome `plastic-button`. Isso bloqueia o uso nativo do Elemento Integrado Personalizado mencionado acima.
73
73
74
-
In 3.0, we are limiting Vue's special treatment of the `is`attribute to the `<component>` tag only.
74
+
Na v3.0, estamos limitando o tratamento especial do Vue ao atributo `is`apenas para a tag `<component>`.
75
75
76
-
-When used on the reserved`<component>` tag, it will behave exactly the same as in 2.x;
77
-
-When used on normal components, it will behave like a normal attribute:
76
+
-Quando usado na tag reservada`<component>`, se comportará exatamente como na v2.x;
77
+
-Quando usado em componentes normais, ele se comportará como um atributo normal:
78
78
79
79
```html
80
80
<foois="bar" />
81
81
```
82
82
83
-
- 2.x behavior: renders the `bar` component.
84
-
- 3.x behavior: renders the `foo`component and passing the`is` attribute.
83
+
-Comportamento 2.x: renderiza o componente `bar`.
84
+
-Comportamento 3.x: renderiza o componente `foo`e passa o atributo`is`.
85
85
86
-
-When used on plain elements, it will be passed to the `createElement`call as the`is` prop, and also rendered as a native attribute. This supports the usage of customized built-in elements.
86
+
-Quando usado em elementos simples, será passado para a chamada `createElement`como o prop`is`, e também renderizado como um atributo nativo. Isso suporta o uso de elementos internos personalizados.
87
87
88
88
```html
89
-
<buttonis="plastic-button">Click Me!</button>
89
+
<buttonis="plastic-button">Clique em mim!</button>
90
90
```
91
91
92
-
-2.x behavior: renders the `plastic-button` component.
93
-
-3.x behavior: renders a native button by calling
92
+
-Comportamento v2.x: renderiza o componente `plastic-button`.
93
+
-Comportamento v3.x: renderiza um botão nativo chamando
[Sinalizador na compilação de migração:`COMPILER_IS_ON_ELEMENT`](migration-build.html#compat-configuration)
100
100
101
-
## `vue:`Prefix for In-DOM Template Parsing Workarounds
101
+
## Prefixo `vue:`para _Workarounds_ na Análise do _template_ no DOM
102
102
103
-
>Note:this section only affects cases where Vue templates are directly written in the page's HTML.
104
-
> When using in-DOM templates, the template is subject to native HTML parsing rules. Some HTML elements, such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<li>`, `<tr>`, and `<option>` can only appear inside certain other elements.
103
+
>Nota: esta seção afeta apenas os casos em que os _templates_ Vue são escritos diretamente no HTML da página.
104
+
>Ao usar _templates_ no DOM, o _template_ está sujeito a regras de análise de HTMLnativo. Alguns elementos HTML, como `<ul>`, `<ol>`, `<table>`e`<select>`têm restrições sobre quais elementos podem aparecer dentro deles, e alguns elementos como `<li>`, `<tr>` e`<option>`só podem aparecer dentro de alguns outros elementos.
105
105
106
-
### 2.x Syntax
106
+
### Sintaxe v2.x
107
107
108
-
In Vue 2 we recommended working around with these restrictions by using the `is` attribute on a native tag:
108
+
No Vue 2, recomendamos trabalhar com essas restrições usando o atributo `is`em uma tag nativa:
109
109
110
110
```html
111
111
<table>
112
112
<tr is="blog-post-row"></tr>
113
113
</table>
114
114
```
115
115
116
-
### 3.x Syntax
116
+
### Sintaxe v3.x
117
117
118
-
With the behavior change of `is`, a `vue:` prefix is now required to resolve the element as a Vue component:
118
+
Com a mudança de comportamento de `is`, um prefixo `vue:`agora é necessário para resolver o elemento como um componente Vue:
119
119
120
120
```html
121
121
<table>
122
122
<tr is="vue:blog-post-row"></tr>
123
123
</table>
124
124
```
125
125
126
-
## Migration Strategy
126
+
## Estratégia de Migração
127
127
128
-
- Replace `config.ignoredElements` with either `vue-loader`'s `compilerOptions` (with the build step) or`app.config.isCustomElement` (with on-the-fly template compilation)
128
+
-Substitua`config.ignoredElements`por `vue-loader`'s `compilerOptions` (com a etapa de compilação) ou `app.config.isCustomElement` (com compilação de _template_ _on-the-fly_)
129
129
130
-
-Change all non-`<component>`tags with`is`usage to `<component is="...">` (forSFC templates) or prefix it with`vue:` (forin-DOM templates).
130
+
- Altere todas as tags não-`<component>` com uso de `is` para `<component is="...">` (para _templates_ SFC) ou prefixe-as com `vue:` (para _templates_ no DOM).
0 commit comments