html-demo-element examples

Developer's documentation in Git repo | This page source | Advanced use

in body


<style>
    @import "demo.css";
</style>
<div class="heart">💖</div>
💖

Legend and description attribute 


    <html-demo-element legend="with legend attribute 🤗" description="👓
                Description will be kept next to legend
                but less emphasized ">
        Eating own dog food 🦴
    </html-demo-element>

with legend attribute 🤗

👓 Description will be kept next to legend but less emphasized 

        Eating own dog food 🦴
Eating own dog food 🦴

Template as body

When template is presented, only its body will be shown as source 
<i>Candle 🕯️</i>
Candle 🕯️

This way you could decorate sources. The sources shown after template and live DOM beneath

Slots: source, demo, text, legend

slot="source" defines where to get code from

slot="demo" inject the html from source:

Croissant 🥐️

slot="text" inject colored code text: 

 <i>Croissant 🥐️ </i>
slot='description' by default bellow the legend in heading, now above

slot='legend' by default on top, now on bottom

src attribute

src='dwarfs.json'

Happy coding!