Skip to content

Commit 75da3df

Browse files
committed
docs(modern-web-platform): link DOMException to MDN and add CDN import map example
1 parent b9a7679 commit 75da3df

File tree

1 file changed

+15
-3
lines changed

1 file changed

+15
-3
lines changed

src/content/guides/modern-web-platform.mdx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ T> Familiarity with [code splitting](/guides/code-splitting/), [caching](/guides
1414

1515
### Problem
1616

17-
If more than one JavaScript bundle executes `customElements.define()` for the same tag name, the browser throws `DOMException: Failed to execute 'define' on 'CustomElementRegistry'`. That often happens when the module that registers an element is duplicated: separate entry points or async chunks each contain a copy of the registration code, so two bundles both run `define` for the same tag.
17+
If more than one JavaScript bundle executes `customElements.define()` for the same tag name, the browser throws [`DOMException`](https://developer.mozilla.org/en-US/docs/Web/API/DOMException): `Failed to execute 'define' on 'CustomElementRegistry'`. That often happens when the module that registers an element is duplicated: separate entry points or async chunks each contain a copy of the registration code, so two bundles both run `define` for the same tag.
1818

1919
### Approach
2020

@@ -102,15 +102,27 @@ export default {
102102
103103
**importmap.json** (served alongside your HTML; URLs must match your deployment)
104104
105+
Local vendor file:
106+
107+
```json
108+
{
109+
"imports": {
110+
"lodash-es": "/vendor/lodash-es.js"
111+
}
112+
}
113+
```
114+
115+
CDN (no self-hosting required):
116+
105117
```json
106118
{
107119
"imports": {
108-
"lodash-es": "/assets/lodash-es.js"
120+
"lodash-es": "https://cdn.jsdelivr.net/npm/lodash-es@4/+esm"
109121
}
110122
}
111123
```
112124
113-
The key `"lodash-es"` must match both the **`externals` key** and the **specifier** in your source (`importfrom "lodash-es"`). The value is the URL the browser loads; webpack does not validate that file.
125+
The key `"lodash-es"` must match both the **`externals` key** and the **specifier** in your source (`importfrom "lodash-es"`). The value is the URL the browser loads — either a local path or a CDN URL; webpack does not validate that file.
114126
115127
**index.html** (order matters: import map before your bundle)
116128

0 commit comments

Comments
 (0)