Project 'mishunov/frankenstein-demo' was moved to 'dmishunov/frankenstein-demo'. Please update any links and bookmarks that may still have the old path.
Select Git revision
-
Denys Mishunov authored
For the simple test, we style with external stylesheet This time, we style it properly with the bundled CSS Module
Denys Mishunov authoredFor the simple test, we style with external stylesheet This time, we style it properly with the bundled CSS Module
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);