Skip to content

Instantly share code, notes, and snippets.

@stramel

stramel/hax-blox.html

Last active November 9, 2017 07:48
Show Gist options
  • Save stramel/784b399c599512a5fb00938aae928844 to your computer and use it in GitHub Desktop.
Save stramel/784b399c599512a5fb00938aae928844 to your computer and use it in GitHub Desktop.
Download ZIP
Polymer 2 Element for dynamically switching out templates with slots
Raw
hax-blox.html
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/utils/import-href.html">
<dom-module id="hax-blox">
<template></template>
<script>
class haxBlox extends Polymer.Element {
static get is() {
return 'hax-blox';
}
static get properties() {
return {
layout: String,
basePath: String,
};
}
static get observers() {
return [
'_changeLayout(basePath, layout)',
];
}
_changeLayout(basePath, layout) {
Polymer.importHref(this.resolveUrl(`${basePath ? basePath : ''}${layout}.html`), (e) => {
this._setTemplate(e.target.import.querySelector('template'));
}, () => {
this._setTemplate(document.createElement('template'));
});
}
_setTemplate(template) {
if (template) {
this.__instance = this._stampTemplate(template);
// Clear the Shadow Root elements
while (this.shadowRoot.firstChild) {
this.shadowRoot.removeChild(this.shadowRoot.firstChild);
}
this.shadowRoot.appendChild(this.__instance);
}
}
}
customElements.define(haxBlox.is, haxBlox);
</script>
</dom-module>
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>hax-blox Examples</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<style>
body {
font-family: sans-serif;
}
</style>
<link rel="import" href="hax-blox.html">
</head>
<body>
<hax-blox layout="test-51" base-path="/">
<div slot="area1">AREA 51</div>
<b slot="area2">AREA 52</b>
Foo Bar
</hax-blox>
<br><br>
<hax-blox layout="test-52">
<div slot="area1">AREA 51</div>
<b slot="area2">AREA 52</b>
Foo Bar
</hax-blox>
<br><br>
<hax-blox layout="test-default">
<div slot="area1">AREA 51</div>
<b slot="area2">AREA 52</b>
Foo Bar
</hax-blox>
<!--
<hax-blox layout="test-52" base-path="layouts/">
<div slot="area1">AREA 51</div>
<b slot="area2">AREA 52</b>
Foo Bar
</hax-blox>
-->
</body>
</html>
Raw
test-51.html
<template>
<style>
:host {
display: flex;
}
</style>
<slot name="area1"></slot>
</template>
Raw
test-52.html
<template>
<style>
:host {
display: flex;
}
</style>
<slot name="area2"></slot>
</template>
Raw
test-default.html
<template>
<style>
:host {
display: flex;
flex-direction: column;
}
</style>
<slot name="area1"></slot>
<slot name="area2"></slot>
<slot></slot>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment