Custom HTML Elements

<template id="sdtemplate">
  <style>
    p { color: orange; }
  </style>
  <p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p>
</template>

<script>
var proto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#sdtemplate');
      this.createShadowRoot().appendChild(t.content.cloneNode(true));
    }
  }
});
document.register('x-foo-from-template', {prototype: proto});
</script>

Custom Elements allow web developers to define new types of HTML elements. The spec is one of several new API primitives landing under the Web Components umbrella, but it’s quite possibly the most important. Web Components don’t exist without the features unlocked by custom elements

Custom Elements: defining new elements in HTML →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.