let dom = {
  shadow(el) {
    return el.createShadowRoot ? el.createShadowRoot() : el.webkitCreateShadowRoot();
  },
  attr(el, prefix='') {
    return Object.keys(el.dataset).map((d)=> `${prefix}${d}="${el.dataset[d]}"`).join(' ')
  }
}

document.registerElement('x-image', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: {
      value() {
        //xtag 嵌套时这里读不到attr, 放到 attach
        console.log('onCreate::image');
      }
    },
    attachedCallback: {
      value() {
        console.log('onAttach::image');
        let shadow = dom.shadow(this);
        shadow.innerHTML = `<style>
            img { max-width: 100%; }
          </style>
          <img ${dom.attr(this)} />`;

        this.onclick = (e) => {
          console.log(this);
        }
      }
    }
  })
});

// other x-tag;

import 'babel/polyfill';
import './xtag.js';

class BaseView {
  constructor(opt) {
    Object.assign(this, {
      root: dom('#app')
    }, opt);
  }
  mount() {
    console.log('event::mount');
  }
  onCreate() {
    console.log('event::create');
  }
  onUpdate() {
    console.log('event::update');
  }
}

export default class BannerView extends BaseView {
  init(...args) {
    this.mount(...args);
  }
  render() {
    return `<x-image data-src="${this.src}"
                     data-href="${this.redirect_url}" />`;
  }
}