xtal-sip
Version:
Dynamically "water" a custom element tag with the necessary dependencies to sprout the tag from an inert seedling to a thing of beauty.
25 lines (24 loc) • 1.02 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link id="shoelace.css" rel=preload as=style href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.21/dist/shoelace/shoelace.css">
<link id="shoelace.js" rel=modulepreload href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.21/dist/shoelace/shoelace.esm.js">
<!-- <link id="css-observe.js" rel=modulepreload href="https://cdn.jsdelivr.net/npm/css-observe@0.0.27/dist/css-observe.min.js"> -->
</head>
<body>
<sl-button>Click me</sl-button>
<sl-checkbox>Checkbox</sl-checkbox>
<script type=module>
import {conditionalImport} from '../conditionalImport.js';
conditionalImport(document.body, {
'sl-{button|checkbox}': [
['shoelace.css'],
['shoelace.js']
]
});
</script>
</body>
</html>