Tabs Web Component

Tabs Web Component

by Niranjan Borawake

HTML

<wc-tabs>
  <wc-tabheader>
    <wc-tab id="tab1" class="selected">Tab1</wc-tab>
    <wc-tab id="tab2">Tab2</wc-tab>
    <wc-tab id="tab3">Tab3</wc-tab>
  </wc-tabheader>
  <wc-tabbody for="tab1" class="active">Tab1 body</wc-tabbody>
  <wc-tabbody for="tab2">Tab2 body</wc-tabbody>
  <wc-tabbody for="tab3">Tab3 body</wc-tabbody>
</wc-tabs>

JavaScript

var root;
var TabsProto = Object.create(HTMLElement.prototype);
TabsProto.createdCallback = function() {
  root = this.createShadowRoot();
  root.innerHTML = `
    <style>
    :host {
      display: block;
    }
    </style>
    <content></content>
  `;
};
TabsProto.attachedCallback = function() {
  console.log('attachedCallback tabs');
  this.addEventListener('TabSelect', function(event) {
    var tabNodes = this.querySelectorAll('wc-tab');
    var tabBodyNodes = this.querySelectorAll('wc-tabbody');
    var clickedTab;
    tabNodes.forEach(function(tabNode) {
      if (tabNode.id !== event.detail.tabId) {
        tabNode.classList.remove('selected');
      }
    }, this);
    tabBodyNodes.forEach(function(tabBodyNode) {
      tabBodyNode.classList.remove('active');
    }, this);
    clickedTab = this.querySelector('wc-tabbody[for="' + event.detail.tabId + '"]');
    clickedTab.classList.add('active');
  });
};
TabsProto.attributeChangedCallback = function(attrName, oldVal, newVal) {};
var Tabs = document.registerElement('wc-tabs', {
  prototype: TabsProto
});

var root;
var TabHeaderProto = Object.create(HTMLElement.prototype);
TabHeaderProto.createdCallback = function() {
  root = this.createShadowRoot();
  root.innerHTML = `
    <style>
    :host {
      display: block;
    }
    </style>

    <content></content>

  `;
};
TabHeaderProto.attachedCallback = function() {
  console.log('attachedCallback tabheader');
};
TabHeaderProto.attributeChangedCallback = function(attrName, oldVal, newVal) {};
var TabHeader = document.registerElement('wc-tabheader', {
  prototype: TabHeaderProto
});

var root;
var TabProto = Object.create(HTMLElement.prototype);
TabProto.createdCallback = function() {
  root = this.createShadowRoot();
  root.innerHTML = `
    <style>
    :host {
      display: inline-block;
      width: 50px;
      padding: 10px;
      text-align: center;
      border: 1px solid;
      cursor: pointer;
    }
    :host-context(.selected) {
     ...