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.