Skip to content

Instantly share code, notes, and snippets.

View jenshelderweirdt's full-sized avatar

Jens Helderweirdt jenshelderweirdt

4 followers · 4 following
View GitHub Profile
@jenshelderweirdt
jenshelderweirdt / email-input-demo.html
Created December 10, 2018 16:38
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Email input demo</title>
</head>
<body>
<script type="module" src="../email-input-vanilla-module/email-input.js"></script>
@jenshelderweirdt
jenshelderweirdt / email-input.js
Created December 10, 2018 16:33
const template = document.createElement('template');
template.innerHTML = `
<label for="email-input">Email</label>
<input type="text" id="email-input" name="email-input">
<div>
<small style="visibility: hidden;" id="validationtext"></small>
</div>
<style>
.invalid {
color: red;
@jenshelderweirdt
jenshelderweirdt / email-input-registration.js
Created December 10, 2018 16:29
window.customElements.define('email-input', EmailInput);
@jenshelderweirdt
jenshelderweirdt / email-input-logic.js
Last active December 12, 2018 16:14
connectedCallback() {
//Registration of the ShadowDOM
this.attachShadow({ mode: 'open' });
const instance = template.content.cloneNode(true);
this.shadowRoot.appendChild(instance);
//Getting a reference to the input-field and the element which will contain the validation text
const emailInput = this.shadowRoot.getElementById('email-input');
const validationText = this.shadowRoot.getElementById('validationtext');
@jenshelderweirdt
jenshelderweirdt / email-input-inputs.js
Created December 10, 2018 15:28
get validmessage() {
return this.getAttribute('validmessage');
}
set validmessage(val) {
this.setAttribute('validmessage', val)
}
get invalidmessage() {
return this.getAttribute('invalidmessage');
@jenshelderweirdt
jenshelderweirdt / email-input-template.js
Last active December 12, 2018 15:30
const template = document.createElement('template');
template.innerHTML = `
<!--Label that will display the input-title 'Email'-->
<label for="email-input">Email</label>
<!--Input field that will be validated when it loses focus-->
<input type="text" id="email-input" name="email-input">
<!--Container for the validation text, hidden by default-->
<div>
@jenshelderweirdt
jenshelderweirdt / CustomElementMyCustomParagraph.js
Created October 29, 2018 20:47
class MyCustomParagraph extends HTMLElement {
constructor() {
super();
}
//all the properties and methods
}
window.customElements.define('my-custom-paragraph', MyCustomParagraph);
@jenshelderweirdt
jenshelderweirdt / ESModule.html
Last active December 10, 2018 14:40
<script type="module" src="my-custom-paragraph/my-custom-paragraph.js"></script>
<!--once imported, you can use the WebComponent as a native HTML-element-->
<my-custom-paragraph></my-custom-paragraph>
@jenshelderweirdt
jenshelderweirdt / ShadowDOM.js
Created October 29, 2018 20:30
$container = document.getElementById("custom-paragraph-containter");
$container.attachShadow({mode: 'open'});
$container.shadowRoot.appendChild((document.getElementById('custom-paragraph').content).cloneNode(true));
@jenshelderweirdt
jenshelderweirdt / TemplateWithContainer.html
Created October 29, 2018 20:29
<p>Paragraph outside the template!</p>
<div id="custom-paragraph-containter"></div>
<template id="custom-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
</style>