html-demo-element
Version:
Webcomponent inserts prism JS syntax colored HTML in html-demo-element before actual dom
103 lines (92 loc) • 3.94 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html-demo-element advanced use </title>
<script type="module" src="../html-demo-element.js"></script>
</head>
<body>
<h1> html-demo-element advanced use </h1>
<p> <a href="index.html">🏠</a>
| 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/advanced.html"> source </a> </p>
<p> Programmatic change <code>source</code>, <code>demo</code>, <code>text</code> property or attribute from text or
DOM subtree.
Click on button to see this demo CSS, JS, or HTML code highlighted by <a href="https://prismjs.com/">PrismJs</a>.
</p>
<style id="sample_css">
@import "demo.css";
body{ display: flex; gap: 1rem; flex-direction: column;}
button
{ padding: 0.5rem; border-radius: 1rem 1rem 0 0; border: none; min-width: 4rem;
&:focus{ background-color: aquamarine; z-index: 1; }
}
fieldset{ padding-bottom: 0; }
html-demo-element{
border: none;
&>*{margin-left: 0; }
fieldset{ display: inline-flex; }
}
[slot="description"]:empty{ display: none; }
</style>
<script id="sample_js">
function setSourceAttribute( cssJsHtml )
{
demoElement.type = cssJsHtml;
demoElement.setAttribute('source', window[ 'sample_'+cssJsHtml ].innerHTML );
}
function setSourceProp( cssJsHtml )
{
demoElement.type = cssJsHtml;
demoElement.source = window[ 'sample_'+cssJsHtml ].innerHTML;
}
function setSourceByNode( cssJsHtml )
{
demoElement.type = cssJsHtml;
demoElement.source = window[ 'sample_'+cssJsHtml ];
}
</script>
<html-demo-element id="demoElement" legend="Programmatic content switch">
<div slot="demo"></div>
<template id="sample_html">
<fieldset>
<legend> demoElement.source = node </legend>
<button onclick="setSourceByNode( 'css' )" > css </button>
<button onclick="setSourceByNode( 'js' )" > js </button>
<button onclick="setSourceByNode( 'html')" > html </button>
</fieldset>
<fieldset>
<legend> demoElement.source = text of </legend>
<button onclick="setSourceProp( 'css' )" > css </button>
<button onclick="setSourceProp( 'js' )" > js </button>
<button onclick="setSourceProp( 'html')" > html </button>
</fieldset>
<fieldset>
<legend> set source attribute from text of </legend>
<button onclick="setSourceAttribute( 'css' )" > css </button>
<button onclick="setSourceAttribute( 'js' )" > js </button>
<button onclick="setSourceAttribute( 'html')" > html </button>
</fieldset>
</template>
</html-demo-element>
<fieldset>
<legend> demoElement2.src = url </legend>
<button onclick="demoElement2.src='demo.css'" > demo.css </button>
<button onclick="demoElement2.src='dev-server.cjs'" > dev-server.cjs </button>
<button onclick="demoElement2.src='advanced.html'" > advanced.html </button>
<button onclick="demoElement2.src='https://unpkg.com/world-countries@4.0.0/data/usa.svg'"
> usa.svg </button>
<button onclick="demoElement2.src='dwarfs.json'"
> dwarfs.json </button>
<html-demo-element id="demoElement2" src="demo.css" type="auto"></html-demo-element>
</fieldset>
<fieldset>
<legend> demoElement3.setAttribute('src', url) </legend>
<button onclick="demoElement3.setAttribute('src','demo.css')" > demo.css </button>
<button onclick="demoElement3.setAttribute('src','dev-server.cjs')" > dev-server.cjs </button>
<button onclick="demoElement3.setAttribute('src','advanced.html')" > advanced.html </button>
<html-demo-element id="demoElement3" src="demo.css" type="auto"></html-demo-element>
</fieldset>
<p>Happy coding!</p>
</body>
</html>