Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shady DOM example
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Hello from outside the Shadow DOM!</h2>
<!-- This Custom Element will be our Shadow Host and contain the Shadow Root. -->
<my-element></my-element>
<!-- This template will hold the implementation for our element. -->
<template id="tmpl">
<style>
h2 {
color: blue;
}
</style>
<h2>Hello from inside the Shadow DOM!</h2>
</template>
<!--
Just load the polyfills for Custom Elements, Shady DOM, and Shady CSS.
The Shady CSS polyfill only supports Custom Elements. Since we need
both the Custom Elements and Shady polyfills, may as well load the bundle!
-->
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-sd-ce.js"></script>
<script>
// prepareTemplate takes the template and applies the scoping attributes
// to each element and puts styles in the <head>.
ShadyCSS.prepareTemplate(tmpl, 'my-el');
class MyElement extends HTMLElement {
connectedCallback() {
// styleElement enables Custom Properties to work on this element
// and any of its children.
ShadyCSS.styleElement(this);
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
}
}
customElements.define('my-element', MyElement);
</script>
</body>
</html>
@simevidas

This comment has been minimized.

Copy link

simevidas commented Jul 6, 2017

@simevidas

This comment has been minimized.

Copy link

simevidas commented Feb 4, 2018

I continuously come back to this code when I need a simple custom element with shadow DOM for testing. Good that I made the demo :-D

@simevidas

This comment has been minimized.

Copy link

simevidas commented Feb 25, 2018

Back again xD

@Oznogco

This comment has been minimized.

Copy link

Oznogco commented Aug 13, 2018

May be for you. What we can do without the file !!
./node_modules/@webcomponents/webcomponentsjs/webcomponents-sd-ce.js

Same with the exemple , 404

<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-sd-ce.js"></script>

Ciao

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.