D3 Examples - X Foo Button

X Foo Button

A demonstration of how to use webcomponents.js to build a simple WebComponent. This is a copy of the example presented in this tutorial Custom Elements, with slight modifications so it works on bl.ocks.org.

According to the tutorial Custom Elements, the following lifecycle callbacks are supported:

createdCallback() is called when a custom element is created.

attachedCallback() is called when a custom element is inserted into a DOM subtree.

detachedCallback() is called when a custom element is removed from a DOM subtree.

attributeChangedCallback(attributeName) is called when a custom element's attribute value has changed

This example only uses the createdCallback() method. These methods are documented in more detail in javascripture: CustomElementPrototype.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.18/webcomponents.min.js"></script>
  <style>
    x-foo {
      font-size: 12em;
    }
  </style>
</head>
​
<body>
  
  <x-foo></x-foo>
  
  <script>
    
    var XFooButtonPrototype = Object.create(HTMLButtonElement.prototype);
    
    XFooButtonPrototype.createdCallback = function() {
      this.textContent = "I'm an x-foo button!";
    };
​
    var XFooButton = document.registerElement('x-foo', {
      prototype: XFooButtonPrototype
    });
  </script>
</body>
​
    