Skip to content
This repository has been archived by the owner on Sep 2, 2024. It is now read-only.

Custom Element creates opinionated stylesheet with no option to exclude it. Better extract it as an optional import. #117

Open
ico85 opened this issue Oct 12, 2022 · 1 comment

Comments

@ico85
Copy link

ico85 commented Oct 12, 2022

Is your feature request related to a problem? Please describe.

I added this script in the head:

<script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/duet.esm.js"></script>

Datepicker initialized correctly but creates a constructed stylesheet with css selectors which I do not want. For example I think it's a bad idea to have a selector like .is-active .duet-date__dialog-content. It may interfere with other css (for example an open accordion). I have no other choice than to override this css. Another example is that the Datepicker overrides default focus-Style of the browser which I also think it's wrong.

Describe the solution you'd like
Extract the css in own file and make it optional by importing it whenever you want.

Describe alternatives you've considered
Didn't find any solution

Additional context
N/A

@ico85
Copy link
Author

ico85 commented Oct 14, 2022

I did the following to isolate the web-component css from global scope:
I'm getting the DuetDatePicker constructor and define a Custom Element which extends the DuetDatePicker. In this I'm attaching a shadowRoot with mode open. Further I have my own Styles in duetDatepickerStyles.css which I inject as . The hacky Part: Need to remove the <style> from DuetDatePicker in JavaScript

`
import {DuetDatePicker} from "@duetds/date-picker/custom-element";

class DatePicker extends DuetDatePicker {
constructor() {
super();
// This isolates the web-component CSS from global CSS
this.attachShadow({mode: 'open'});
}

loadStylesheet() {
    const linkElem = document.createElement("link");
    linkElem.setAttribute("rel", "stylesheet");
    linkElem.setAttribute("href", `/styles/duetDatepickerStyles.css`);
    this.shadowRoot.appendChild(linkElem);
}

connectedCallback() {

    super.connectedCallback();

    setTimeout(() => {
    
        // Remove default styles, hacky.
        this.shadowRoot.querySelector("style").remove();

        // Load my own Custom Styles as <link> inside the shadow dom
        loadStylesheet();

        
    });
}

}

// Define the extended Datepicker as Custom Element
customElements.define("duet-date-picker", DatePicker);`

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

1 participant