From 08be15e3aea40a15d1231e18e34143b12b9ea346 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 18 Aug 2019 20:15:26 -0400 Subject: [PATCH] add some more CE docs --- site/content/docs/03-run-time.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index b06911a4de..d5653dd288 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -934,6 +934,18 @@ customElements.define('my-element', MyElement); --- +Once a custom element has been defined, it can be used as a regular DOM element: + +```js +document.body.innerHTML = ` + +

This is some slotted content

+ +`; +``` + +--- + By default, custom elements are compiled with `accessors: true`, which means that any [props](docs#Attributes_and_props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible). To prevent this, add `accessors={false}` to ``. @@ -953,6 +965,8 @@ Custom elements can be a useful way to package components for consumption in a n * Styles are *encapsulated*, rather than merely *scoped*. This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier * Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string * Custom elements are not generally suitable for server-side rendering, as the shadow DOM is invisible until JavaScript loads +* In Svelte, slotted content renders *lazily*. In the DOM, it renders *eagerly*. In other words, it will always be created even if the component's `` element is inside an `{#if ...}` block. Similarly, including a `` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times +* The `let:` directive has no effect * Polyfills are required to support older browsers