以下のように指定して、vue-cli-service build --target wc でビルド。その後カスタムエレメントの属性で制約違反の値をセットしても、その値が入ってしまう。
コンソールにエラーは出るが、値が入るんじゃ全く意味がない。指定方法はこれで間違いはないと思うんだけどな。
export default class TestVue extends Vue {
@Prop(Number) readonly prop_a!: number
@Prop({ type: Number, required: true, default: 999, validator: function () { return false; } }) readonly prop_b!: Number
@Prop({ type: String, required: true, default: "デフォルト", validator: function () { return false; } }) readonly prop_c!: string
@Prop({ type: Boolean, required: true, default: true, validator: function () { return false; } }) readonly prop_d!: boolean
略
}
自力で値チェックして、エラー時は this.$el.parentNode.removeChild(this.$el);
で無理やり使えなくする処理が必要かな。
エラーが出ても画面上は変化がないからユーザは気付かずに使ってしまうだろうし。