import Vue from "vue";
import VueCompositionAPI from "@vue/composition-api";
import vueCustomElement from "vue-custom-element";
import bdliteChartComp from "./Container.vue";
// import "../utils/parseData"
Vue.use(vueCustomElement);
Vue.use(VueCompositionAPI);

Vue.customElement("bdlite-chart", bdliteChartComp, {
  shadow: true,
  shadowCss: `
  :host {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .bdlite-chart-item {
     width: 100%;
     height: 100%;
  }
`,
  beforeCreateVueInstance(root) {
    const rootNode = root.el.getRootNode();
    if (rootNode instanceof ShadowRoot) {
      root.shadowRoot = rootNode;
    } else {
      root.shadowRoot = document.head;
    }
    return root;
  },
    // one of element's attributes (Vue instance props) is changed 
  // attributeChangedCallback(name, oldValue, value) {
  //   console.info('attributeChangedCallback', name, oldValue, value);
  // },
});
