Add sl-include

docs/_sidebar.md

@@ -49,6 +49,7 @@
 - Utility Components
   - [Animation](/components/animation.md)
   - [Format Bytes](/components/format-bytes.md)
+  - [Include](/components/include.md)
   - [Responsive Embed](/components/responsive-embed.md)
 
 - Design Tokens

docs/assets/examples/include.html

@@ -0,0 +1,5 @@
+<p style="margin-top: 0;">
+  The content in this example was included from <a href="/assets/examples/include.html" target="_blank">a separate file</a>. 🤯
+</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla urna porttitor rhoncus dolor purus non enim. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Gravida in fermentum et sollicitudin.</p>
+<p>Cursus sit amet dictum sit amet justo donec enim. Sed id semper risus in hendrerit gravida. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Nec ullamcorper sit amet risus nullam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lorem donec massa sapien faucibus et molestie. A cras semper auctor neque vitae.</p>

docs/components/include.md

@@ -0,0 +1,39 @@
+# Include
+
+[component-header:sl-include]
+
+Includes give you the power to embed external HTML files into the page.
+
+Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made.
+
+The included content will be inserted into the `<sl-include>` element's default slot so it can be easily accessed and styled through the light DOM.
+
+```html preview
+<sl-include src="/assets/examples/include.html"></sl-include>
+```
+
+## Examples
+
+### Listening for Events
+
+When an include file loads successfully, the `sl-load` event will be emitted. You can listen for this event to add custom loading logic to your includes.
+
+If the request fails, the `sl-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
+
+```html
+<sl-include src="/assets/examples/include.html"></sl-include>
+
+<script>
+  const include = document.querySelector('sl-include');
+  
+  include.addEventListener('sl-load', () => {
+    console.log('Success');
+  });
+
+  include.addEventListener('sl-error', event => {
+    console.log('Error', event.detail.status);
+  });
+</script>
+```
+
+[component-metadata:sl-include]

docs/getting-started/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `label` slot to `sl-input`, `sl-select`, and `sl-textarea` [#248](https://github.com/shoelace-style/shoelace/issues/248)
 - Added `label` slot to `sl-dialog` and `sl-drawer`
+- Added experimental `sl-include` component
 - Fixed a bug where initial transitions didn't show in `sl-dialog` and `sl-drawer` [#247](https://github.com/shoelace-style/shoelace/issues/247)
 - Fixed a bug where indeterminate checkboxes would maintain the indeterminate state when toggled
 - Fixed a bug where concurrent active modals (i.e. dialog, drawer) would try to steal focus from each other