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
`class`and`style`attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are.
15
+
`class`と`style`属性は、Vue 2 の仮想 DOM の実装で特別な処理を受けます。そのため、これらは `$attrs` には含まれず、他の属性はすべて含まれます。
16
16
17
-
A side effect of this manifests when using `inheritAttrs: false`:
17
+
この副作用は、`inheritAttrs: false` を使用したときに現れます:
18
18
19
-
-Attributes in `$attrs`are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
20
-
-But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
`$attrs`contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
51
+
`$attrs`には**すべての**属性が含まれるので、すべての属性を別の要素に適用することが容易になります。先ほどの例では、次のような HTML が生成されるようになりました:
52
52
53
53
```html
54
54
<label>
55
55
<inputtype="text"id="my-id"class="my-class" />
56
56
</label>
57
57
```
58
58
59
-
## Migration Strategy
59
+
## 移行手順
60
60
61
-
In components that use `inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class`and`style`, some visuals might be broken as these attributes might now be applied to another element.
-**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.
11
-
-**BREAKING:**Special`is`attribute usage is restricted to the reserved `<component>`tag only.
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.
-**新機能:**ネイティブの HTML パースの制限を回避する目的で、ネイティブ要素に `is`を使用するという 2.x のユースケースをサポートするため、値の前に `vue:`を付けて Vue コンポーネントとして解決するようにします。
13
13
14
-
## Autonomous Custom Elements
14
+
## 自主的なカスタム要素
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
+
Vue の外部で定義されたカスタム要素を追加したい場合（例えば Web コンポーネント API を使用するなど）、Vue にカスタム要素として扱うように「指示」する必要があります。次のテンプレートを例にして説明します。
17
17
18
18
```html
19
19
<plastic-button></plastic-button>
20
20
```
21
21
22
-
### 2.x Syntax
22
+
### 2.x の構文
23
23
24
-
In Vue 2.x, configuring tags as custom elements was done via `Vue.config.ignoredElements`:
-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:
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:
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.
-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
+
-予約済みである `<component>`タグで使用された場合、2.x と全く同じ動作をします。
77
+
-通常のコンポーネントで使用する場合は、通常の属性と同じように動作します:
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
+
- 2.x の動作: `bar`コンポーネントをレンダリングします。
84
+
- 3.x の動作: `foo`コンポーネントをレンダリングし、`is`属性を渡します。
85
85
86
-
-When used on plain elements, it will be passed to the `createElement`call as the `is`attribute, and also rendered as a native attribute. This supports the usage of customized built-in elements.
## `vue:`Prefix for In-DOM Template Parsing Workarounds
101
+
## DOM 内テンプレートのパース回避のための `vue:`プレフィックス
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
+
>注意: このセクションは、Vue のテンプレートがページの HTML に直接記述されている場合にのみ影響します。
104
+
>DOM内テンプレートを使用する場合、テンプレートはネイティブの HTMLパースルールに従います。`<ul>`、`<ol>`、`<table>`、`<select>`などの一部の HTML 要素は、その内部に表示できる要素に制限がありますし、`<li>`、`<tr>`、`<option>`などの一部の要素は、他の特定の要素内にのみ表示できます。
105
105
106
-
### 2.x Syntax
106
+
### 2.xの構文
107
107
108
-
In Vue 2 we recommended working around with these restrictions by using the `is` attribute on a native tag:
- Replace `config.ignoredElements` with either `vue-loader`'s `compilerOptions`(with the build step) or `app.config.compilerOptions.isCustomElement`(with on-the-fly template compilation)
0 commit comments