Created
September 5, 2017 23:19
-
-
Save freshcutdevelopment/4a5935ad2a55c23f493fd9807967a332 to your computer and use it in GitHub Desktop.
Shadow DOM basics - blog Gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
</head> | |
<body> | |
<template id="info-card"> | |
<style> | |
.card-content { | |
border:1px solid grey; | |
width: 500px; | |
height: 150px; | |
margin-bottom:10px; | |
padding:20px; | |
color: #777; | |
background-color: #F7F7F7; | |
font-family: 'Source Sans Pro', Helvetica, 'Open Sans', sans-serif; | |
} | |
.card-body{ | |
background-color:white; | |
padding:10px; | |
padding-bottom: 30px; | |
} | |
</style> | |
<div class="card-content"> | |
<slot name="header">To be replaced with header</slot> | |
<div class="card-body"> | |
<slot name="body"><p>To be replaced with body </p></slot> | |
</div> | |
</div> | |
</template> | |
<script> | |
customElements.define('x-info-card', | |
class extends HTMLElement { | |
constructor() { | |
super(); | |
var template = document | |
.getElementById('info-card') | |
.content; | |
const shadowRoot = this.attachShadow({mode: 'open'}) | |
.appendChild(template.cloneNode(true)); | |
} | |
}); | |
</script> | |
<x-info-card> | |
<span slot="header"> | |
<h1>slot header content - card 1</h1> | |
</span> | |
<span slot="body"> | |
<span>slot body content - card 1</span> | |
</span> | |
</x-info-card> | |
<x-info-card> | |
<span slot="header"> | |
<h1>slot header content - card 2</h1> | |
</span> | |
<span slot="body"> | |
<span>slot body content - card 2</span> | |
</span> | |
</x-info-card> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment