Creating Custom HTML Elements for Enterprise

A Tutorial

Published in

Capital One Tech

4 min readFeb 27, 2017

Most large technology-driven companies, work constantly to establish and implement a common look and feel across their digital properties. In my 25 years as a developer, one way I’ve helped achieve this goal is by creating common web components for use across all business units. This helps us save time and resources in several ways:

A common nomenclature and process for all developers that reduces the amount of training and knowledge transfer for new hires.
Reduction in coding due to reuse of components, with a corresponding reduction in time to markets.
Fewer bugs.

A seemingly simple task, implementing common web components has become increasingly difficult due to the increased number of frameworks available for development.

So why pursue this approach?

By not taking this approach, each team within your enterprise would have to create their own base web components. This can cause problems even when you have the simplest of changes. For example, what if a design team decided to change a simple action link to an action button? For even a small group, this could mean four or five different teams would have to change this code for their app. At a minimum, this mean four or five developers having to work on this. On an enterprise level, that add up fast.

By using common components, this action button would be worked on by one developer who would share their work across all the teams. Multiply this scenario across all the digital properties in a large enterprise and this is a significant money-saving reduction in time and resources.

Fortunately for developers, we have access to the new web standard — Web Components. Made up of four specs — Custom Element, HTML Imports, Templates, and Shadow DOM — these specs can be used to create plain vanilla JavaScript custom elements to deliver to web application developers.

What does this mean? It means you no longer must write specific elements for each of the frameworks being used for development. This allows teams to concentrate on the core components and the unit tests around them.

Interested in leveraging these specs to create your own plain vanilla JavaScript custom elements? Let’s take a look at how we create a plain slider using this technique.

Custom Slider How-To

First we create a JavaScript Object whose prototype is HTMLElement. This gives us access to all the html element’s attributes and methods:

export class CaponeSlider extends HTMLElement {
  connectedCallback () {
    this.innerHTML = 'Capital One Slider';
  }
}

We have created an object called CaponeSlider. It will be a custom slider for our app. To use this element, we first must tell the browser that we have a custom element to register.

customElements.define('capone-slider', CaponeSlider);

Now you have an element that will show the text “Capital One Slider” on the page. We would build out our innerHTML to show the custom slider. We would also include styles in our HTML to make it adhere to our visual standard. One of the big “gotchas” with custom elements is they must have a dash in the name. As you can see here, we register the element as capone-slider. In your page we can now use it like so:

<body>
 <capone-slider></capone-slider>
</body>

Add more JavaScript to this object to add more functionally to your element. The contract between your element and the parent DOM should follow the bind-event model. This way, every property that is bound to our object is watched for changes and will fire events when the state has changed in our object.

In JavaScript, there is a different between the DOM property and the HTML attributes. Under the hood, the browser helps keep the properties and attributes in sync on elements (example is id attribute). On your custom element you must do the same.

Luckily this is not very hard. On our slider lets add a label attribute.

export class CaponeSlider extends HTMLElement {
  get label (){
    return this.getAttribute('label');
  }
  set label(_label){
    if(_label){
      this.setAttribute('label', _label);
    } else {
      this.removeAttribute('label');
    }
  }
  connectedCallback () {
    this.innerHTML = `Capital One Slider with ${this.label}`;
  }
}

Here you can see we have added the property label to our object and assigned it to the attribute of the element.

Conclusion

Having the ability to create custom elements using basic JavaScript keeps web properties consistently on brand and allows teams the flexibility to choose the best frameworks for their projects. This way, core teams don’t have to pick a single framework for use by every development team. Nor do they have to duplicate elements for each of the specific frameworks in use either. This allows large enterprises to be more flexible and save money through a significant reduction in time and resources.

For more on APIs, open source, community events, and developer culture at Capital One, visit DevExchange, our one-stop developer portal. https://developer.capitalone.com/

Creating Custom HTML Elements for Enterprise

A Tutorial

So why pursue this approach?

Custom Slider How-To

Conclusion

Written by Jason Dalton