To define a new HTML element we need the power of CustomElement
IMPORTANT: after defining a CustomElement
, the registerCustomElement
method must be called
with the new class name. only then will the tag defined via the getTag
method be made known to the DOM.
You can create the object via the function document.createElement()
.
<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
document.createElement('monster-')
</script>
Interaction
Styling
For optimal display of custom-elements the pseudo-class :defined can be used.
To prevent the custom elements from being displayed and flickering until the control is registered, it is recommended to create a css directive.
In the simplest case, you can simply hide the control.
<style>
my-custom-element:not(:defined) {
display: none;
}
my-custom-element:defined {
display: flex;
}
</style>
Alternatively you can also display a loader
my-custom-element:not(:defined) {
display: flex;
box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15);
border-radius: 4px;
height: 200px;
position: relative;
overflow: hidden;
}
my-custom-element:not(:defined)::before {
content: '';
display: block;
position: absolute;
left: -150px;
top: 0;
height: 100%;
width: 150px;
background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}