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

[ico85]

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]

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);`