Skip to content
Snippets Groups Projects
Select Git revision
  • migration/jquery-to-react
  • migration/jquery-to-vue
  • migration/jquery-to-react-css-modules
  • migration/angularjs-to-vue
  • master default protected
5 results

Header-wrapper.js

Header-wrapper.js 1.69 KiB
import "@webcomponents/webcomponentsjs/custom-elements-es5-adapter";

import Vue from "../vue/node_modules/vue";
import VueHeader from "../vue/src/Header.vue";

const styleOverrides = ".todoapp{margin: 0;box-shadow: none;border: none;}";

Vue.config.productionTip = false;

class FrankensteinWrapper extends HTMLElement {
  connectedCallback() {
    // In order to not loose the root styles, coming from index.css
    // we need to set up the wrapping element with .todoapp
    const appWrapper = document.createElement("div");
    appWrapper.classList.add("todoapp");

    const mountPoint = document.createElement("div");
    appWrapper.appendChild(mountPoint);

    this.attachShadow({ mode: "open" }).appendChild(appWrapper);

    // PULLING IN GLOBAL STYLES AND OVERRIDES:
    //
    // 1. Global Styles
    //
    // If there are <style> elements in our component waiting to be consumed
    // by our wrapper, pull those into the Shadow DOM in *reversed* order
    // to preserve the original order of the stylesheets
    Array.prototype.slice
      .call(this.querySelectorAll("style"))
      .forEach(style => {
        this.shadowRoot.prepend(style);
      });

    //
    // 2. Overrides
    //
    const overridesStylesheet = document.createElement("style");
    overridesStylesheet.innerHTML = styleOverrides;
    window.requestAnimationFrame(() => {
      // We do it in the next animation frame for our overrides
      // to go after Alien's bundled styles
      this.shadowRoot.appendChild(overridesStylesheet);
    });

    new Vue({
      shadowRoot: this.shadowRoot,
      render: h => h(VueHeader)
    }).$mount(mountPoint);
  }
}

customElements.define("frankenstein-header-wrapper", FrankensteinWrapper);