Web-Components on My personal blog

how the web component slot system works

Thu, 15 Jun 2017 10:08:54 +0200

In my previous post I described how to send data in form of attributes to a web component. Since this mechanism is only applicable for simple values, there also is a separate mechanism for inserting complex values.

Let me explain the goal first. If I have a web component which consists of the following internal structure.

<hello-card>
    #shadow-root
    <div id="header">
      <p></p>
    </div>
    <div id="content">
      <p></p>
    </div>
</hello-card>

To use this component, you have to insert it into the DOM and it will render a visual representation. If I now want to fill those empty placeholders with content I have to use HTML elements within the component.

how web component attributes work

Wed, 14 Jun 2017 10:08:54 +0200

My last post described how to build a web component. Any form of data handling was intentionally left out.

So here comes part 2 in my web component series on how to handle data in form of attributes. In HTML it would look like this.

<hello-world name="jens"></hello-world>

Since the whole web component exists within one javascript class, the data handling has to be done within that class. The first thing that came to my mind was to extend the constructor to read all attributes on creation.

writing a hello world web component

Sat, 03 Jun 2017 10:08:54 +0200

Web components are the shiny new thing on the horizon for web development. Sadly browser support is not just there, but it seems to be growing pretty quickly.

For an up-to-date overview, you can head over to caniuse.com for a summary.

Starting small.

A web component is Javascript class, which defines an HTML element with its own layout, structure and behavior.

So the most basic web component would look like this.