Skip to content

docs: Change is prop to is attribute #1197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 24, 2021
Merged

docs: Change is prop to is attribute #1197

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d876ab3
Change `is` prop to `is` attr
Yukon123 Aug 21, 2021
fd478e8
change attr to attribute
Yukon123 Aug 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/guide/migration/custom-elements-interop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ badges:
## Overview

- **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.
- **BREAKING:** Special `is` prop usage is restricted to the reserved `<component>` tag only.
- **BREAKING:** Special `is` attribute usage is restricted to the reserved `<component>` tag only.
- **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.

## Autonomous Custom Elements
Expand Down Expand Up @@ -69,21 +69,21 @@ The Custom Elements specification provides a way to use custom elements as [Cust
<button is="plastic-button">Click Me!</button>
```

Vue's usage of the `is` special prop 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.
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.

In 3.0, we are limiting Vue's special treatment of the `is` prop to the `<component>` tag only.
In 3.0, we are limiting Vue's special treatment of the `is` attribute to the `<component>` tag only.

- When used on the reserved `<component>` tag, it will behave exactly the same as in 2.x;
- When used on normal components, it will behave like a normal prop:
- When used on normal components, it will behave like a normal attribute:

```html
<foo is="bar" />
```

- 2.x behavior: renders the `bar` component.
- 3.x behavior: renders the `foo` component and passing the `is` prop.
- 3.x behavior: renders the `foo` component and passing the `is` attribute.

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

```html
<button is="plastic-button">Click Me!</button>
Expand All @@ -105,7 +105,7 @@ In 3.0, we are limiting Vue's special treatment of the `is` prop to the `<compon

### 2.x Syntax

In Vue 2 we recommended working around with these restrictions by using the `is` prop on a native tag:
In Vue 2 we recommended working around with these restrictions by using the `is` attribute on a native tag:

```html
<table>
Expand Down