Skip to content
Snippets Groups Projects
Commit f591f1aa authored by Denys Mishunov's avatar Denys Mishunov
Browse files

Styled Header Vue component within jQuery

For the simple test, we style with external stylesheet

This time, we style it properly with the bundled CSS Module
parent 26be7c01
No related branches found
No related tags found
No related merge requests found
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
......@@ -26,6 +25,9 @@ module.exports = {
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
shadowMode: true
}
},
{
test: /\.js$/,
......@@ -39,12 +41,45 @@ module.exports = {
},
{
test: /\.css$/,
use: {
loader: 'css-loader',
options: {
modules: true
}
}
oneOf: [
// this matches `<style module>`
{
resourceQuery: /module/,
use: [
{
loader:'vue-style-loader',
options: {
shadowMode: true
}
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:5]'
}
}
]
},
// this matches plain `<style>` or `<style scoped>`
{
test: /\/vue\//,
use: [
{
loader: 'style-loader',
options: {
insert: 'frankenstein-header-wrapper'
}
},
{
loader: 'css-loader',
options: {
localIdentName: '[local]_[hash:base64:5]'
}
}
]
},
]
},
{
test: /\.(jpg|png|svg|webp)$/,
......@@ -55,7 +90,7 @@ module.exports = {
name: '[name].[ext]',
publicPath: (url, resourcePath, context) => {
if (/vue/.test(resourcePath)) {
return `../vue/public/${url}`;
return `vue/public/${url}`;
}
},
}
......
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);
import "@webcomponents/webcomponentsjs/custom-elements-es5-adapter";
import Vue from "../vue/node_modules/vue";
import VueHeader from "../vue/src/Header.vue";
Vue.config.productionTip = false;
class FrankensteinWrapper extends HTMLElement {
connectedCallback() {
const mountPoint = document.createElement("div");
this.attachShadow({ mode: "open" }).appendChild(mountPoint);
new Vue({
render: h => h(VueHeader)
}).$mount(mountPoint);
}
}
customElements.define("frankenstein-header-wrapper", FrankensteinWrapper);
import './header-wrapper';
\ No newline at end of file
import './Header-wrapper';
\ No newline at end of file
......@@ -11,10 +11,11 @@
"handlebars": "~2.0.0",
"html-loader": "^0.5.5",
"jquery": "~2.1.1",
"to-string-loader": "^1.1.5",
"style-loader": "^1.0.0",
"todomvc-app-css": "^2.1.0",
"todomvc-common": "~1.0.1",
"vue-loader": "^15.7.0"
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2"
},
"devDependencies": {
"@babel/core": "^7.4.4",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment