Prevent multiple insertions of the same style in the header

[priandsf]

SSR
Styles are currently added to the dom.head without checking if they already have been added through SSR. As a result, the same styles will appear twice, which does not hurt but is unnecessary. Each generated style should be identified by a custom id and checked before being added to the DOM head.

[caridy]

yeah, this should be easy to solve in synthetic shadow.

[diervo]

How do we endup with two tough? The component should always only be evaluated once?

[caridy]

Diego, that is a good question, this is the routine we have:

const InsertedGlobalStyleContent: Record<string, true> = create(null);

function insertGlobalStyle(styleContent: string) {
    // inserts the global style when needed, otherwise does nothing
    if (isUndefined(InsertedGlobalStyleContent[styleContent])) {
        InsertedGlobalStyleContent[styleContent] = true;
        const elm = createStyleElement(styleContent);
        appendChild.call(globalStyleParent, elm);
    }
}

that global cache should be sufficient, we do not inspect the DOM to see if it was already inserted, I wonder why then too?

[wjhsf]

The <lwc-style> helper introduced in #5264 should address this use case.