Hi,
I have a custom web components library. I need a text field for manage date input.
So, I thought to use vaadin-date-picker inside my web component.
It works fine.
Now I have to custom visualization style, so the component will be similar to others in my library.
My web component library is a stencil library, written using typescript.
The component is created during render method like this:
<Host><div id="kup-component"><vaadin-date-picker
theme="custom-input-field-style"
label={label}
placeholder={placeholderLabel}
clear-button-visible={isClearable ? true : null}
></vaadin-date-picker></div></Host>
During componentWillLoad() method I added to the DOM:
<dom-module id="custom-input-field-style" theme-for="vaadin-text-field">
<template>
<style>
:host([theme~="custom-input-field-style"]
)
[part="input-field"]
{
border: 1px solid pink;
background-color: white; }
</style>
</template>
</dom-module>
When I inspect the resulting page, I can see the dom-module tag and its content correctly.
But the vaadin-date-picker component didn’t change style.
I tried to add dom-module first to the document.body, like first child.
Then I tried to add it to the shadowRoot of my custom component, like first child too.
Anything changes.
What can I do? Have you any suggestions?