Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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);