Web component stylsheet is re-downloaded everytime an instance of it is created - web-component

Question

I am making a pair of custom web components to show notifications. The wc-notifier is the parent, which creates wc-notifications on itself, there maybe multiple notifications shown at the same time, in which case one parent, many children.
Each web component has links to two external stylesheets:
base.mins.css
It's own shadow.mins.css
As you can see below I duplicated the links because I am trying to use the preload functionality of the browser:
I know I could inline the stylesheet, but I would like to link the styles, for the same reason we normally link stylesheets.
<template id="TEMPLATE_wc-notification">
<link rel="stylesheet" type="text/css" href="/static/csslib/base.min.css">
<link rel="preload" as="style" type="text/css" href="/static/csslib/base.min.css">
<link rel="stylesheet" type="text/css" href="/static/wclib/wc-notification/shadow.min.css">
<link rel="preload" as="style" type="text/css" href="/static/wclib/wc-notification/shadow.min.css">
<div id="CONTAINER" class="d:f a-i:s o-y:a max-h:80vh"><div name="icon" class="o-align:c-m h:64"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="INFO"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="SUCCESS"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="WARNING"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="ERROR"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><slot id="SLOT" class="d:b f-s:24 f-w:500 o-w:a m-t:10"></slot><div id="CLOSE" class="o-align:c-m a-r:1/1 c:p bg-c:black|15a#h b-r-r:6 h:64"><svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 0 24 24" width="32px" fill="black" draggable="false" class="p:4"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div></div>
</template><script type="module" async src="/static/wclib/wc-notification/component.min.js"></script>
<template id="TEMPLATE_wc-notifier">
<link rel="stylesheet" type="text/css" href="/static/csslib/base.min.css">
<link rel="preload" as="style" type="text/css" href="/static/csslib/base.min.css">
<link rel="stylesheet" type="text/css" href="/static/wclib/wc-notifier/shadow.min.css">
<link rel="preload" as="style" type="text/css" href="/static/wclib/wc-notifier/shadow.min.css">
<div id="CONTAINER" class="p:f r:0 t:0 d:f f-d:c a-i:e z-i:1000" hidden><slot></slot></div>
</template><script type="module" async src="/static/wclib/wc-notifier/component.min.js"></script>
Say I perform a fetch, and the server does not respond. Then I wish to show a notification that the submission failed. Now the problem comes in that I would like to show a notification about the failed fetch.
However when I try create the notification, the browser then wishes to re-download the stylesheet for the notification, however now there is "no connection", so the notification is not styled.
Heres the response Headers (showing its not set to no-cache etc):
Note I test the failed fetch within about 10 seconds of the page loading:
Cache-Control: max-age=6000
Content-Disposition: inline; filename="component.min.js"
Content-Length: 1105
Content-Type: application/javascript
Date: Wed, 21 Sep 2022 20:47:35 GMT
Last-Modified: Wed, 21 Sep 2022 20:47:35 GMT
Server: WSGIServer/0.2 CPython/3.9.13
Set-Cookie: ... expires=Sat, 22 Oct 2022 20:47:35 GMT; HttpOnly; Max-Age=2678400; Path=/; SameSite=Lax
Vary: Cookie
Why does the browser try to redownload the stylesheet? How do I make it download once at start up, and not again everytime I create an element of wc-notification? The above scenario is the worst case, but even good cases its slow to style the component, because everytime I add a web component, the stylesheet is re-downloaded.
I also tried #import, but it results in the same issue, the stylesheet is downloaded every time.
<template id="TEMPLATE_wc-notification"><style>#import "/static/csslib/base.min.css"</style>
<style>#import "/static/wclib/wc-notification/shadow.min.css"</style>
<div id="CONTAINER" class="d:f a-i:s o-y:a max-h:80vh"><div name="icon" class="o-align:c-m h:64"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="INFO"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="SUCCESS"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="WARNING"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" draggable="false" class="icon-svg" id="ERROR"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg></div><slot id="SLOT" class="d:b f-s:24 f-w:500 o-w:a m-t:10"></slot><div id="CLOSE" class="o-align:c-m a-r:1/1 c:p bg-c:black|15a#h b-r-r:6 h:64"><svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 0 24 24" width="32px" fill="black" draggable="false" class="p:4"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></div></div>
</template><script type="module" async src="/static/wclib/wc-notification/component.min.js"></script>
<template id="TEMPLATE_wc-notifier"><style>#import "/static/csslib/base.min.css"</style>
<style>#import "/static/wclib/wc-notifier/shadow.min.css"</style>
<div id="CONTAINER" class="p:f r:0 t:0 d:f f-d:c a-i:e z-i:1000" hidden><slot></slot></div>
</template><script type="module" async src="/static/wclib/wc-notifier/component.min.js"></script>
I did come across Constructable Style Sheets when trying to look fo ra solution, but Safari does not support the replace and replaceSync methods, which are the heart of it for web components.

Answer 1

I'm assuming that:
You are including the templates in the HTML of the web page
Since one of your css files is named "shadow.min.css", that you are using a Shadow DOM.
You are wanting to make a single http call for your css files regardless of the number of custom tags in the web page.
Since you are building a web component, you should adhere to the principle of compartmentalization, meaning: A user of the component only has to include a [script] tag in the HTML and everything else gets loaded by the component - and stays in the component.
When you inject a [link] tag into the Shadow DOM from within your component, the browser will cache the file that was retrieved. Usually, that's all you have to do.
For the templates, since we don't have HTML imports at the moment, the easiest way to fetch a template ONLY ONCE in spite of the number of custom tags in the web page is to make use of native Javascript modules. Modern browsers seem to have good support for native JS modules. CAVEAT, your template file must have a .js extension or it won't work ie. template.js. If this doesn't work for your particular situation, then you have to store the content of the template somehow - see the answer to this question: Single HTTP request for HTML template file for multiple instances of the same Web Component
So, assuming a directory structure like this:
Document-root
- index.html
-/static
-- /components
--- /wc-notification
---- component.js
---- template.js
--/csslib
--- base.min.css
--- /wclib
---- /wc-notification
----- shadow.min.css
index.html
<head>
<script type="module" src="/static/components/wc-notification/component.js"></script>
</head>
<body>
<wc-notification>Foo</wc-notification>
<wc-notification>Bar</wc-notification>
<wc-notification>Baz</wc-notification>
</body>
component.js
import { template } from "./template.js";
export class WCNotificaton extends HTMLElement {
#css_file1 = "/static/csslib/base.min.css";
#css_file2 = "/static/wclib/wc-notification/shadow.min.css"
constructor() {
super();
const style = document.createElement('style');
const fragment = document.createRange().createContextualFragment(template);
style.setAttribute("rel", "stylesheet");
this.style1 = style.cloneNode();
this.style1.setAttribute("href", this.css_file1);
this.style2 = style.cloneNode();
this.style2.setAttribute("href", this.css_file2);
this.notification_template = fragment.querySelector('#TEMPLATE_wc-notification').content;
this.notifier_template = fragment.querySelector('#TEMPLATE_wc-notifier').content;
this.shadow = this.attachShadow({ mode: "open" })
}
connectedCallback() {
this.doSomethingwithTheTemplates();
this.render();
}
doSomethingwithTheTemplates() {
this.notify = // the result of processing the templates, should be a DOM Node;
}
render() {
this.shadow.append(this.style1);
this.shadow.append(this.style2);
this.shadow.append(this.notify);
}
document.addEventListener('DOMContentLoaded', customElements.define('wc-notification', WCNotificaton);
template.js (I'm using a template literal here because it's easy)
export const template = `
<template id="TEMPLATE_wc-notification">
<!-- Do not include <link> or #import, <style> is OK -->
</template>
<template id="TEMPLATE_wc-notifier">
<!-- Do not include <link> or #import, <style> is OK -->
</template>
`;