Skip to content

Instantly share code, notes, and snippets.

@carlosrojaso

carlosrojaso/index.html

Last active September 30, 2020 12:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carlosrojaso/3b38a4a432464efbcd4317e719041e6b to your computer and use it in GitHub Desktop.
Save carlosrojaso/3b38a4a432464efbcd4317e719041e6b to your computer and use it in GitHub Desktop.
Download ZIP
Step 4
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);
}
}
}
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