Let’s build some blocks!

We’ll walk through a practical example in the following chapter.

class LargeTitle extends HTMLElement { constructor() { super(); // get the template element and its contents let template = document.

getElementById('large-title'); let templateContent = template.

content; // create a shadowRoot with open mode const shadowRoot = this.

attachShadow({mode: 'open'}) // append the cloned content to the shadow root shadowRoot.

appendChild(templateContent.

cloneNode(true)); }}customElements.

define('large-title', LargeTitle)Writing the info-box componentCreating a custom element begins with creating an ES 2015 (Ecmascript 2015) class.

We create a class which extends HTMLElement, so that it can be attached to the DOM.

The constructor contains the logic for setting up the element.

First, we need to create a shadow root which we can later attach our elements to.

The shadow root is the connection point to the original DOM.

class InfoBox extends HTMLElement { constructor() { super() // create shadow root const shadowRoot = this.

attachShadow({mode: 'open'}) // our code goes here –> }}// define info-box as a custom elementcustomElements.

define('info-box', InfoBox)After we create the shadow root, let’s go on and define our elements.

Inside our info box we want a title, a text and a button.

The box itself is a <div>-element.

We create these elements using document.

createElement().

// create a div with the class 'container'const container = document.

createElement('div')container.

setAttribute('class', 'container')// create a titleconst title = document.

createElement('h2')title.

setAttribute('class', 'title')// create the info text const info = document.

createElement('span')info.

setAttribute('class', 'infoText')// create the button and add the text "Ok!" to itconst button = document.

createElement('button')button.

setAttribute('class', 'okButton')button.

textContent = "Ok!"// set the buttons onClick attribute to hide the componentfunction setHidden() { container.

setAttribute('hidden', 'true') }button.

onclick = setHidden;The whole point with custom components is that they are reusable and modifiable.

For example, we want to be able to display many different kinds of texts in our info box.

Let’s set the title text and the info text as attributes to our custom element in our HTML.

<info-box title="Library book order" info="You have some books waiting for you at the central library.

Please pick them up within a week.

" />Now we can use these attributes to set the text content of box.

We use the element.

getAttribute()-function to retrieve the attributes of the <info-box> element.

// get the title and info attributes and put them inside // the info box title and textconst titleText = this.

getAttribute('title')title.

textContent = titleText;const infoText = this.

getAttribute('info')info.

textContent = infoText;We also want to create styles for the custom element.

We can do this using a template string in our JavaScript.

// create stylesconst style = document.

createElement('style')style.

textContent =`.

container { text-align: center; background-color: #fcfc9c; border-radius: 10px; width: 80%;}.

title { font-size: 1.

2em; margin: 5px;}.

infoText { .

}`Last but not least, we now append all the elements we have defined to the shadow root.

// append styles and container to the shadow rootshadowRoot.

appendChild(style)shadowRoot.

appendChild(container)// append title, info and button to the containercontainer.

appendChild(title)container.

appendChild(info)container.

appendChild(button)Next stepsOne exciting thing about web components which we didn’t try out yet is it’s lifecycle callbacks.

You can tap into the following events to modify the functionality of the component.

connectedCallback() {}disconnectedCallback() {}adoptedCallback() {}attributeChangedCallback() {}We also mentioned <slot> -elements earlier, but we didn’t use them in the info box component.

Slots are a more convenient way to pass DOM-elements inside your element.

Maybe you could find a way to refactor the info box so that the button would be passed in through a slot?.You can find some handy hints here.

Thanks for reading!Go ahead and play around with the code in CodePen.

????Resources:MDN: Web ComponentsGoogle Developers: Web ComponentsThe Syntax Podcast: The SHADOW DOM.

. More details

Leave a Reply