Empty boolean prop not recognised

Hi! We’ve been using vue-custom-element the last couple of weeks on our new project and we love it! Custom elements are so much more flexible than regular Vue components, and not having to include the Vue runtime is so great.

Unfortunately I did find an inconsistency in how props are handled between Vue and vue-custom-element.

If I have the following prop:

props: {
    required: { type: Boolean, default: false }
}

With this HTML code:

<component required></component>

In regular Vue, this code works as expected (this.required is true), but when doing the same on a custom element, the boolean remained false.

The following is needed to make it work:

<component required="true"></component>

But this pattern actually generates an error in regular Vue (Invalid prop: type check failed), so it’s not really consistent or intuitive.

[karol-f]

Fixed in https://github.com/karol-f/vue-custom-element/releases/tag/v3.2.2, thanks for reporting!

[woubuc]

My problem is that omitting a default value will make it default to undefined rather than false, so while it’s a falsy value (matching !prop) it won’t match prop === false. JSFiddle illustrating this.