From 1c69b59b415decd5d0b8d20f332af5e85aacc630 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Wed, 7 Apr 2021 20:07:16 +0900
Subject: [PATCH 1/4] Add an original document

---
 .../migration/attrs-includes-class-style.md   | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/guide/migration/attrs-includes-class-style.md

diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md
new file mode 100644
index 00000000..dbb6a5ce
--- /dev/null
+++ b/src/guide/migration/attrs-includes-class-style.md
@@ -0,0 +1,69 @@
+---
+title: $attrs includes class & style
+badges:
+  - breaking
+---
+
+# `$attrs` includes `class` & `style` <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+`$attrs` now contains _all_ attributes passed to a component, including `class` and `style`.
+
+## 2.x Behavior
+
+`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.
+
+A side effect of this manifests when using `inheritAttrs: false`:
+
+- Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
+- But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
+
+```vue
+<template>
+  <label>
+    <input type="text" v-bind="$attrs" />
+  </label>
+</template>
+<script>
+export default {
+  inheritAttrs: false
+}
+</script>
+```
+
+when used like this:
+
+```html
+<my-component id="my-id" class="my-class"></my-component>
+```
+
+...will generate this HTML:
+
+```html
+<label class="my-class">
+  <input type="text" id="my-id" />
+</label>
+```
+
+## 3.x Behavior
+
+`$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:
+
+```html
+<label>
+  <input type="text" id="my-id" class="my-class" />
+</label>
+```
+
+## Migration Strategy
+
+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.
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration guide - `$listeners` removed](./listeners-removed.md)
+- [Migration guide - New Emits Option](./emits-option.md)
+- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)

From 3bdfc206a01c6dbbe72ca4674cb796cb2d36bead Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Thu, 8 Apr 2021 20:15:23 +0900
Subject: [PATCH 2/4] Add sidebar menu

---
 src/.vuepress/config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 1d29ce3b..5c816565 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -114,6 +114,7 @@ const sidebar = {
         'migration/array-refs',
         'migration/async-components',
         'migration/attribute-coercion',
+        'migration/attrs-includes-class-style',
         'migration/custom-directives',
         'migration/custom-elements-interop',
         'migration/data-option',

From c580e9502151ba0f305821e2c79a3fb2e40a578a Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Fri, 9 Apr 2021 12:00:16 +0900
Subject: [PATCH 3/4] Replace with Japanese translation

---
 .../migration/attrs-includes-class-style.md   | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md
index dbb6a5ce..8dbdf51d 100644
--- a/src/guide/migration/attrs-includes-class-style.md
+++ b/src/guide/migration/attrs-includes-class-style.md
@@ -1,23 +1,24 @@
 ---
-title: $attrs includes class & style
+title: class と style を含む $attrs
 badges:
   - breaking
 ---
 
-# `$attrs` includes `class` & `style` <MigrationBadges :badges="$frontmatter.badges" />
+# `class` と `style` を含む `$attrs` <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-`$attrs` now contains _all_ attributes passed to a component, including `class` and `style`.
+`$attrs` は、 `class` と `style` を含む、コンポーネントに渡されるすべての属性が含まれるようになりました。
 
-## 2.x Behavior
+## 2.x の挙動
 
-`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.
+`class` と `style` 属性は、Vue 2 の仮想 DOM 実装でいくつかの特別な処理が行われます。そのため、他のすべての属性は含まれていますが、これらは `$attrs` に含まれていません。
 
-A side effect of this manifests when using `inheritAttrs: false`:
+この副作用は、 `inheritAttrs: false` を使用した場合に明らかになります:
 
-- Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
+- `$attrs` に含まれる属性は、自動的にルート要素に追加されなくなり、どこに追加するかは開発者の判断に委ねられます。
 - But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
+- しかし、 `class` と `style` は、 `$attrs` の一部ではないので、コンポーネントのルート要素に適用されます:
 
 ```vue
 <template>
@@ -32,13 +33,13 @@ export default {
 </script>
 ```
 
-when used like this:
+このような使い方をする場合:
 
 ```html
 <my-component id="my-id" class="my-class"></my-component>
 ```
 
-...will generate this HTML:
+...以下のHTMLが生成されます:
 
 ```html
 <label class="my-class">
@@ -46,9 +47,9 @@ when used like this:
 </label>
 ```
 
-## 3.x Behavior
+## 3.x の挙動
 
-`$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:
+`$attrs` には、すべての属性が含まれているので、すべての属性を別の要素に適用することが簡単にできます。先ほどの例は、次のHTMLが生成されます:
 
 ```html
 <label>
@@ -56,14 +57,14 @@ when used like this:
 </label>
 ```
 
-## Migration Strategy
+## 移行方針
 
-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.
+`inheritAttrs: false` を使用しているコンポーネントでは、スタイルの適用が意図したとおりに動作することを確認してください。もし以前に `class` や `style` の特別な動作に依存していた場合、これらの属性が別の要素に適用されている可能性があるため、一部の見た目が崩れている可能性があります。
 
-## See also
+## 関連情報
 
-- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
-- [Migration guide - `$listeners` removed](./listeners-removed.md)
-- [Migration guide - New Emits Option](./emits-option.md)
-- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
-- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
+- [関連する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [移行ガイド - `$listeners` の削除](./listeners-removed.md)
+- [移行ガイド - 新しい Emits のオプション](./emits-option.md)
+- [移行ガイド - `.native` 修飾子の削除](./v-on-native-modifier-removed.md)
+- [移行ガイド - Render 関数 API の変更](./render-function-api.md)

From e78c86505239b46bdad2aeb733d0767978cb3edc Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Sat, 10 Apr 2021 16:58:31 +0900
Subject: [PATCH 4/4] fix: remove original line

---
 src/guide/migration/attrs-includes-class-style.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md
index 8dbdf51d..56ca046d 100644
--- a/src/guide/migration/attrs-includes-class-style.md
+++ b/src/guide/migration/attrs-includes-class-style.md
@@ -17,7 +17,6 @@ badges:
 この副作用は、 `inheritAttrs: false` を使用した場合に明らかになります:
 
 - `$attrs` に含まれる属性は、自動的にルート要素に追加されなくなり、どこに追加するかは開発者の判断に委ねられます。
-- But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
 - しかし、 `class` と `style` は、 `$attrs` の一部ではないので、コンポーネントのルート要素に適用されます:
 
 ```vue