Skip to content

Instantly share code, notes, and snippets.

@carlosrojaso

carlosrojaso/index.html

Last active September 30, 2020 12:11
Show Gist options
  • Save carlosrojaso/ca48103ce7a8f5e951ab0ab6b0240719 to your computer and use it in GitHub Desktop.
Save carlosrojaso/ca48103ce7a8f5e951ab0ab6b0240719 to your computer and use it in GitHub Desktop.
Download ZIP
Step 5
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo - error-component</title>
</head>
<body>
<error-component>Default Message</error-component>
<error-component kind="warning">Warning Message</error-component>
<error-component kind="error">Error Message</error-component>
<script>
class ErrorComponent extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({mode: 'open'});
this.templates = document.createElement('div');
this.container = document.createElement('div');
this.root.appendChild(this.templates);
this.root.appendChild(this.container);
this.templates.innerHTML = ErrorComponent.template();
const kind = this.getAttribute(`kind`) || `none`;
const template = this.templates.querySelector(`template.${kind}-type`);
if (template) {
const clone = template.content.cloneNode(true);
this.container.innerHTML = '';
this.container.appendChild(clone);
}
}
static template () {
return `
<template class="warning-type">
<style>
.warning {
background-color: yellow;
padding: 15px;
color: black;
}
</style>
<div class="warning">
<slot>Error component<slot>
</div>
</template>
<template class="error-type">
<style>
.error {
background-color: red;
padding: 15px;
color: black;
}
</style>
<div class="error">
<slot>Error component<slot>
</div>
</template>
<template class="none-type">
<style>
.none {
background-color: gray;
padding: 15px;
color: black;
}
</style>
<div class="none">
<slot>Error component<slot>
</div>
</template>
`;
}
}
customElements.define('error-component', ErrorComponent);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment