Skip to content

Instantly share code, notes, and snippets.

/emzdjn.markdown

Created May 29, 2017 05:24
Show Gist options
  • Save anonymous/61ce250ac5adb8f784e8ed86e7c1ea9b to your computer and use it in GitHub Desktop.
Save anonymous/61ce250ac5adb8f784e8ed86e7c1ea9b to your computer and use it in GitHub Desktop.
Download ZIP
EmzdjN
Raw
index.html
<template>
<link rel="stylesheet" href="nav-component.css">
<nav>
<a href="home">home</a>
<content select="a"></content>
</nav>
</template>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<!-- <link rel="import" href="nav-component.html"> -->
<!--<link rel="stylesheet" href="nav-component.css">-->
</head>
<body>
<app-nav>
<a href="portfollip">portfollio</a>
<a href="awards">awards</a>
<a href="blog">blog</a>
<a href="contact">contact</a>
<span>for testing</span>
</app-nav>
</body>
</html>
Raw
script.js
let template = document.currentScript.ownerDocument.querySelector('template');
let clone = document.importNode(template.content, true);
let proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
let root = this.createShadowRoot();
root.appendChild(clone);
}
document.registerElement('app-nav', {
prototype: proto
});
Raw
style.css
nav {
background-color: #70EADF;
padding: 20px;
}
nav a {
text-decoration: none;
padding: 10px;
font-size: 150%;
}
::content a {
text-decoration: none;
padding: 10px;
font-size: 150%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment