danielmoncada / date-time-picker

Angular Date Time Picker (Responsive Design)
https://daniel-projects.firebaseapp.com/owlng/date-time-picker
MIT License
137 stars 59 forks source link

CSS style not imported in web component #132

Open bmickoski opened 2 years ago

bmickoski commented 2 years ago

When using ViewEncapsulation.ShadowDom external lib css is not being imported in custom element component. Dynamic Form Component is defined as Custom Element which uses custom lib that imports date-time-picker.

 /**
     * Application bootstrap
     */
    ngDoBootstrap(): void {
        const dynamicFormElement = createCustomElement(DynamicFormComponent, {
            injector: this.injector,
        });

        // Update module configuration. Add shadow root object.
        customElements.define(WEB_CMP_SELECTOR, dynamicFormElement);
        const el = this.document.querySelector(WEB_CMP_SELECTOR);
        if (el && el.shadowRoot) {
            config.SHADOW_ROOT = el.shadowRoot;
        }
    }

Dynamic Component css file

// this import is not working
@import "~@danielmoncada/angular-datetime-picker/assets/style/picker.min.css";

:host {
    font-family: "Raleway"....
}

And from the image below we can see that style is added in shadowRoot but it is still messed up.

image

ankurrai2602 commented 2 years ago

May i know, Why this issue got closed without any reply. i am looking for solution of this problem

danielmoncada commented 2 years ago

May i know, Why this issue got closed without any reply. i am looking for solution of this problem

Never heard back from OP.

I'll re-open, thanks for replying.