Custom Element

–HTML File

<template>
    <style>
        * {
            background: #CCC;
        }
    </style>
    <p>Custom Elememnt</p>
</template>

<custom-tag></custom-tag>

–JS

// Grab our template full of slider markup and styles
var tmpl = document.querySelector('template');

// Create a prototype for a new element that extends HTMLElement
var ImgSliderProto = Object.create(HTMLElement.prototype);

// Setup our Shadow DOM and clone the template
ImgSliderProto.createdCallback = function() {
  var root = this.createShadowRoot();
  root.appendChild(document.importNode(tmpl.content, true));
};

// Register our new element
var ImgSlider = document.registerElement('custom-tag', {
  prototype: ImgSliderProto
});

[vc_single_image image=”908″ img_size=”full”]