Cherry-picking components from the CDN - how to do it so it works? #748
-
|
Google Pagespeed Insights complained about some (large) JS chunks being loaded - so I gave the «cherry-picking» a shot, as described in the Installation.
Can't get it to work, though: Using the resource picker directly on jsDelivr gave me the following * (as I have selected these components' js only): <script type="module" src="https://cdn.jsdelivr.net/combine/npm/@shoelace-style/[email protected]/dist/components/tooltip/tooltip.min.js,npm/@shoelace-style/[email protected]/dist/components/icon/icon.min.js,npm/@shoelace-style/[email protected]/dist/components/button/button.min.js,npm/@shoelace-style/[email protected]/dist/components/button-group/button-group.min.js"></script>* note: i manually added But adding this to the
What am I missing? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
I just found that it works to include each component individually from jsDelivr: <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/tooltip/tooltip.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/icon/icon.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/button/button.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/button-group/button-group.min.js"></script> |
Beta Was this translation helpful? Give feedback.
-
|
When cherry-picking the «icon.js»-component, what else is needed to have the actual icons from the default library show up? Including |
Beta Was this translation helpful? Give feedback.
-
|
Make sure to set the base path so Shoelace knows where to find them. |
Beta Was this translation helpful? Give feedback.
-
@claviska Sorry for when I'm being too stupid – but I am completely lost here. How do I correctly set the base path when using all assets from the CDN? In both of the following cases I get the JS console error Here's what I've tried: |
Beta Was this translation helpful? Give feedback.
-
|
Ohhh I think I got it - I have to point to the basepath ON the component's <script>-tag!? (not a separate js) So this works (for loading icons) and not giving me the …
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/icon/icon.min.js"
data-shoelace="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist"></script>
… |
Beta Was this translation helpful? Give feedback.
-
It shouldn't matter. Shoelace looks at all scripts in the document that might be a match. The |
Beta Was this translation helpful? Give feedback.
-
|
For future reference, avoid using magic CDN links and stick with the copy/paste ones that are available from each component's page. e.g. https://shoelace.style/components/button?id=importing |
Beta Was this translation helpful? Give feedback.
I just found that it works to include each component individually from jsDelivr: