Short backstory
I initially set up my project with a vue-cli environment using Vue 2 and options-api. Recently, I decided to transition to create-vue, which is based on Vite with Vue 3 and Typescript. To incorporate web components from Stencil into my project, I created an npm package. While this process was smooth with my previous tech stack, I am currently facing challenges that I can't seem to figure out.
Current situation
Upon importing the npm package into my new environment, I encountered several errors which I managed to resolve by upgrading Stencil from v2.7.0 to v2.16.1 and adding experimentalImportInjection for proper compilation in Vite.
// stencil.config.ts
...
extras: {
experimentalImportInjection: true
}
The main issue now lies with passing props to these components.
In Stencil, I have defined the props as follows:
@Prop() state: 'none' | 'focus' | 'active' = 'none';
@Prop() label: string;
@Prop() meta: string;
@Prop() disabled = false;
@Prop() valid?: true | false | null = null;
While in my Vue code, I declare the custom component like this:
<fds-input id="loginEmail" label="Email" meta="meta text" :valid="false" :disabled="isDisabled">
<input type="email" v-model="email" @blur="checkEmail" data-cy="input-text-email"/>
</fds-input>
My primary objective is to change the value of valid to toggle between valid and invalid states, each with different CSS styles.
Findings so far
- Altering the value of
:validor:disableddoes not reflect any changes, regardless of whether I pass values as strings or booleans. - On the other hand, changing the values of
metaandlabelworks seamlessly, be it through binding (:meta="") or regular attribute (meta=""). - When inspecting the element in my browser (Chrome), only the ID and class are visible on the element.
- Interestingly, setting the attribute
valid="false"within asetTimeoutfunction using vanilla JavaScript triggers the desired component state change. - Even after upgrading Stencil to the latest version of v2, there has been no impact on the current issues.