curran/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.
Built with blockbuilder.org

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>