html-demo-element
Version:
Webcomponent inserts prism JS syntax colored HTML in html-demo-element before actual dom
69 lines (57 loc) • 2.17 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html-demo-element examples </title>
<script type="module" src="../html-demo-element.js"></script>
</head>
<body>
<h1> html-demo-element examples </h1>
<p> Developer's documentation in <a href="https://github.com/sashafirsov/html-demo-element">Git repo</a>
| This page <a href="https://github.com/sashafirsov/html-demo-element/blob/main/demo/index.html">source</a>
| <a href="advanced.html">Advanced use</a>
</p>
<h2>in body</h2>
<html-demo-element>
<style>
@import "demo.css";
</style>
<div class="heart">💖</div>
</html-demo-element>
<h2> Legend and description attribute </h2>
<html-demo-element>
<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>
</html-demo-element>
<h2> Template as body </h2>
<html-demo-element>
<fieldset>
<legend>When template is presented, only its body will be shown as source</legend>
<template><i>Candle 🕯️</i></template>
<p>This way you could decorate sources. The sources shown after template and live DOM beneath </p>
</fieldset>
</html-demo-element>
<h2> Slots: source, demo, text, legend </h2>
<html-demo-element legend="slot='legend' by default on top, now on bottom">
<template>ignored</template>
<template slot="source"> <i>Croissant 🥐️ </i></template>
<p><code>slot="source"</code> defines where to get code from </p>
<p><code>slot="demo" </code> inject the html from source: </p>
<div slot="demo"> replaced with tasty demo </div>
<p><code>slot="text" </code> inject colored code text: </p>
<div slot="text"> replaced with colored code </div>
<div slot="description"><b>slot='description'</b> by default bellow the legend in heading, now above</div>
<div slot="legend"></div>
</html-demo-element>
<h2>src attribute</h2>
<html-demo-element legend="src='dwarfs.json'" src="dwarfs.json">
</html-demo-element>
<p>Happy coding!</p>
</body>
</html>