<component :is=".."> should not set attributes to the root html tag of the component automatically

Version

2.5.2

Reproduction link

https://codesandbox.io/s/2oz1p5qpo0

Steps to reproduce

Open the reproduction link:

1. Open the devtools
2. The element with the id="foo" will have the propa attribute

What is expected?

The element with the id="foo" doesn’t have the propa attribute

What is actually happening?

It has.

---

I know the problem is that the Foo component doesn’t declare the props fields(I comment in the Foo component), if it has, the element with the id="foo" will not have the propa attribute, but the problem here is that the variable passed to is to <component :is="..."> it not determined, probably it is a component which don’t need the propA field.

So, we should not set any attribute to the root html tag of the component automatically.

[Justineo]

Seems not correct, only the component which related to native tag(almost are about form like input/button/video/audio/select/form/table…) will need this feature

Actually there are a lot of HTML global attributes which may need inheritAttrs to be true. For example, when you are making an accessible web app, the aria-* global attributes are essential and needs to be handcrafted differently in each scenario. It’s impossible to encapsulate all A11Y annotation inside component libraries.

That’s a workaround but seems not correct, it needs us to add some judgement like v-bind=“is === Foo ? { prop: ‘…’ } : {}”, why I need to do this? It just use a problem to solve another problem.

You can pass a component’s options object into is and filter the v-bind object by checking if it has specific prop declared for the rendered component. See this sandbox: https://codesandbox.io/s/42zoo8m4o7.

[NE-SmallTown]

Ok, fine, just trade off, though seems the codesandbox is more fussy than just use inheritAttrs IMO