Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Shadow DOM basics - blog Gist
<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