A custom element to live edit other custom elements. Like react-live, but for web components (custom elements).

💫️ Demos

!demo.gif

Usage

Install by

``
yarn add @hunchcloud/live-element
`

Insert the following HTML

`html

<br /> <your-custom-element></your-custom-element><br />

`

Then you will get a playground to live edit .

Notice the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> wrapper is required to prevent </code><your-custom-element><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> rendering before being passed to </code><live-element><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Customize editor styles</h2></p><p class="my-3">Use </code>style-template-id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to pass in customized styles.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><template id="prism-solarized"><br /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism-solarizedlight.min.css" /><br /> <style><br /> #live-editor {<br /> color: #657b83;<br /> background: #073642;<br /> }<br /> ::slotted(*) {<br /> background: lightcyan;<br /> }<br /> </style><br /></template></p><p class="my-3"><live-element style-template-id="prism-solarized"><br /> <textarea><br /> <your-custom-element></your-custom-element><br />

`

Development

`
parcel example/demo.md
``