Created
August 21, 2020 20:16
-
-
Save kyleconroy/158499f420f8c90d2f2704a610fcb57b to your computer and use it in GitHub Desktop.
This file contains hidden or 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
<!-- Input Go template --> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Pop-up info box — web components</title> | |
<script src="main.js" defer></script> | |
</head> | |
<body> | |
<h1>Pop-up info widget - web components</h1> | |
<my-paragraph></my-paragraph> | |
<my-paragraph> | |
<span slot="my-text">Let's have some different text!</span> | |
</my-paragraph> | |
<my-paragraph> | |
<ul slot="my-text"> | |
<li>Let's have some different text!</li> | |
<li>In a list!</li> | |
</ul> | |
</my-paragraph> | |
</body> | |
</html> | |
<!-- Web Components --> | |
<template id="my-paragraph"> | |
<p><slot name="my-text">My default text</slot></p> | |
</template> | |
<!-- Output HTML --> | |
<!DOCTYPE html><html><head> | |
<meta charset="utf-8"/> | |
<title>Pop-up info box — web components</title> | |
<script src="main.js" defer=""></script> | |
</head> | |
<body> | |
<h1>Pop-up info widget - web components</h1> | |
<p>My default text</p> | |
<p><span>Let's have some different text!</span></p> | |
<p><ul> | |
<li>Let's have some different text!</li> | |
<li>In a list!</li> | |
</ul></p> | |
</body></html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment