Skip to content

Instantly share code, notes, and snippets.

@ebidel

ebidel/demo_polymer.html

Last active November 24, 2017 10:11
Show Gist options
  • Save ebidel/65b4565947c6399c82ac6f7d1a276442 to your computer and use it in GitHub Desktop.
Save ebidel/65b4565947c6399c82ac6f7d1a276442 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Element v0 + Shadow DOM v0 example. Vanilla (webcomponents.js polyfill) vs. Polymer.
Raw
demo_polymer.html
<html>
<head>
<title>Polymer example</title>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<script>
// Enable native SD if available and lazy register.
window.Polymer = window.Polymer || {
dom: 'shadow',
lazyRegister: 'max',
useNativeCSSProperties: true
};
</script>
<!-- Can use lite version of wc.js because Polymer defaults to shady dom. -->
<script src="https://www.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.min.js" async></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/v1.6.1/polymer.html">
<!-- is="custom-style" will make polymer shim these styles (e.g. the custom properties) for browsers that don't support it. -->
<style is="custom-style">
section {
display: flex;
}
section > * {
margin-right: 16px;
}
body {
/* Inheritable styles (font, css, etc), continue to inherit into shadow dom. Any styles that do not inherit, need to be defined in the element's shadow dom or the element should use CSS custom propeties to define styling hooks. */
font-family: 'Playfair Display';
font-weight: 400;
}
/* CSS custom properties are great for themeing and/or overriding the default styles an element defines in its shadow dom. For example, <disney-card> will use --font-color if its provided. */
disney-card.red {
--theme-color: red;
}
disney-card.yellow {
--theme-color: #ffcc00;
--shadow-color: var(--theme-color);
}
/* custom elements can be styles from the outside */
disney-card {
height: 150px;
width: 150px;
}
/* example of styling the element differently based on an attribute selector. the element could define this selector inside its own shadow dom */
disney-card[type="small"] {
width: 100px;
height: 100px;
}
</style>
<!-- element definition -->
<dom-module id="disney-card">
<template>
<style>
:host {
--default-theme-color: #ccc;
width: 200px;
height: 200px;
background: #fafafa;
box-shadow: 0 0 3px var(--shadow-color, var(--default-theme-color));
padding: 16px;
display: inline-block;
position: relative;
}
/* style an .title children passed into our shadow dom */
::content .title {
margin: 0;
text-transform: uppercase;
}
footer {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--theme-color, rgba(0,0,0,0.5));
color: white;
padding: 16px;
font-size: 12px;
}
[hidden] {
display: none;
}
</style>
<content select=".title"></content>
<footer id="footer" hidden$="[[!hasFooter]]">
<content id="c" select="footer"></content>
</footer>
<div><content>default content.</content></div>
</template>
<script>
// Only need to wrap Polymer() in HTMLImports.whenReady when the
// dom-module is in the main page. If this was in an HTML import, that's not needed.
HTMLImports.whenReady(function() {
Polymer({
is: 'disney-card',
properties: {
hasFooter: {
type: Boolean,
value: false
}
},
created() {
// instance is created
},
attached() {
// TODO: run _updateFooter when disney-card light dom children change. MutationObserver is good for this.
this._updateFooter();
},
_updateFooter() {
// Need Polymer.dom() wrapp any time you're touching a dom node. Requirement by Polymer to normalize between shady dom and shadow dom.
let content = Polymer.dom(this.$.c);
this.hasFooter = content.getDistributedNodes().length;
},
detached() {
// removed from the dom
},
attributeChanged(attrName, oldVal, newVal) {
// Called when attribute `attrName` changes.
}
});
});
</script>
</dom-module>
<section>
<disney-card class="red">
<h1 class="title">Mickey</h1>
<p>is a mouse</p>
<footer>Footer 1</footer>
</disney-card>
<disney-card type="small" class="blue">
<!-- div.title instead of h1.title. Still works! -->
<div class="title">Donald</div>
<!-- Note: no footer -->
</disney-card>
<disney-card class="yellow">
<h1 class="title">Pluto</h1>
<p>is a dog</p>
<footer>Yellow theming</footer>
</disney-card>
</section>
</body>
</html>
Raw
demo_vanilla.html
<html>
<head>
<title>Vanilla web components example</title>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<!-- need to use the full wc.js polyfill (not lite) to get shadow dom api (createShadowRoot, etc) in unsupported browsers. -->
<script src="https://www.polymer-project.org/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<style>
section {
display: flex;
}
section > * {
margin-right: 16px;
}
body {
/* Inheritable styles (font, css, etc), continue to inherit into shadow dom. Any styles that do not inherit, need to be defined in the element's shadow dom or the element should use CSS custom propeties to define styling hooks. */
font-family: 'Playfair Display';
font-weight: 400;
}
/* CSS custom properties are great for themeing and/or overriding the default styles an element defines in its shadow dom. For example, <disney-card> will use --shadow-color if its provided. */
disney-card.red {
--theme-color: red;
}
disney-card.yellow {
--theme-color: #ffcc00;
--shadow-color: var(--theme-color);
}
/* custom elements can be styles from the outside */
disney-card {
height: 150px;
width: 150px;
}
/* example of styling the element differently based on an attribute selector. the element could define this selector inside its own shadow dom */
disney-card[type="small"] {
width: 100px;
height: 100px;
}
</style>
<section>
<disney-card class="red">
<h1 class="title">Mickey</h1>
<p>is a mouse</p>
<footer>Footer 1</footer>
</disney-card>
<disney-card type="small" class="blue">
<!-- div.title instead of h1.title. Still works! -->
<div class="title">Donald</div>
<!-- Note: no footer! -->
</disney-card>
<disney-card class="yellow">
<h1 class="title">Pluto</h1>
<p>is a dog</p>
<footer>Yellow theming</footer>
</disney-card>
</section>
<!-- elements local dom (shadow dom) -->
<template>
<style>
:host {
--default-theme-color: #ccc;
width: 200px;
height: 200px;
background: #fafafa;
box-shadow: 0 0 3px var(--shadow-color, var(--default-theme-color));
padding: 16px;
display: inline-block;
position: relative;
}
/* style an .title children passed into our shadow dom */
::content .title {
margin: 0;
text-transform: uppercase;
}
footer {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--theme-color, rgba(0,0,0,0.5));
color: white;
padding: 16px;
font-size: 12px;
}
</style>
<content select=".title"></content>
<footer>
<content select="footer"></content>
</footer>
<div><content>default content.</content></div>
</template>
<script>
class DisneyCard extends HTMLElement {
constructor() {
// Not called in CE v0. Will be called in v1.
}
createdCallback() {
// instance is created.
}
attachedCallback() {
let t = document.querySelector('template');
let dupe = t.content.cloneNode(true);
this.createShadowRoot().appendChild(dupe);
// TODO: run _updateFooter when disney-card light dom children change. MutationObserver is good for this.
this._updateFooter();
// For poyfill'd browsers, need to shim styles manually.
if (window.WebComponents && WebComponents.ShadowCSS) {
WebComponents.ShadowCSS.shimStyling(t.content, 'disney-card' /* , extends name */);
}
}
_updateFooter() {
let content = this.shadowRoot.querySelector('content[select="footer"]');
if (!content.getDistributedNodes().length) {
this.shadowRoot.querySelector('footer').style.display = 'none';
}
}
detachedCallback() {
// removed from the dom
}
attributeChangedCallback(attrName, oldVal, newVal) {
// Called when attribute `attrName` changes.
}
}
document.registerElement('disney-card', DisneyCard);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment