[SUGGESTION] Provide a way to take outter css in the shadowDOM about slim.js HOT 2 CLOSED

const valueCache: Record<string, Promise<string>> = typeof (<any>window)['AppContext'] === 'object' ? (<any>window)['AppContext'].getConfig('styleCache') : {};

export class StyleLoader extends HTMLElement {
    connectedCallback () {
        const href = this.getAttribute('href');
        const name = this.getAttribute('name');

        if (!name || !href) {
            return;
        }
        if (valueCache[name] && typeof (<any>valueCache[name]).resolve === 'function') {
            const resolve = (<any>valueCache[name]).resolve;
            fetch(href)
                .then(r => r.text())
                .then(styleText => resolve(styleText.replace(/([\n|\r|\t])/gm, '')))
                .catch(() => {});
        }
        if (!valueCache[name]) {
            valueCache[name] = new Promise((resolve, reject) => {
                fetch(href).then(r => r.text()).then(styleText => resolve(styleText.replace(/([\n|\r|\t])/gm, ''))).catch(reject);
            });
        }
    }
}

export class SharedStyle extends HTMLStyleElement {
    public styleLoaded = false;
    constructor() {
        super();
        this.applyStyle();
    }

    connectedCallback() {
        this.applyStyle();
    }

    applyStyle() {
        if (this.styleLoaded) {
            return;
        }
        const name = this.getAttribute('name');
        if (name) {
            let p = valueCache[name];
            if (!p) {
                let resolve;
                p = new Promise<string>(res => resolve = res);
                (<any>p).resolve = resolve;
                valueCache[name] = p;
            }
            p.then(text => this.innerHTML = text);
            this.styleLoaded = true;
        }
    }
}

customElements.define('shared-style', SharedStyle, {extends: 'style'});
customElements.define('style-loader', StyleLoader);