Instantly share code, notes, and snippets.

What would you like to do?

David Friedman wondered aloud about a <spoiler> element. The Web Components proposal will allow custom HTML elements. This is an example of an <x-spoiler> element (the spec requires a hypen in the name) implemented using Google's Polymer library.

Click on the obscured text to reveal the spoiler.

<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
<link rel="import" href="spoiler.html">
<p>No frills: <x-spoiler>Snape</x-spoiler> kills <x-spoiler>Trinity</x-spoiler> with <x-spoiler>Rosebud</x-spoiler>.</p>
<p>Supply your own color: Soylent Green is <x-spoiler color='green'>PEOPLE!</x-spoiler></p>
<p>Some spoilers should expire quickly: Yesterday, <x-spoiler expires='2013-10-04'>all my troubles seemed so far away</x-spoiler>.</p>
<p>But some should last a hundred years: Rosebud was <x-spoiler expires='2041-05-01'>his sled</x-spoiler>.</p>
<polymer-element name="x-spoiler" constructor="Spoiler" attributes="color expires">
@host {
* { display: inline-block; }
*:hover { cursor: pointer; }
<span id='spoiler'></span>
function spoil(o) { =;;
Polymer('x-spoiler', {
created: function() {
var e = this.$.spoiler;
e.innerHTML = this.innerHTML;
e.setAttribute('onclick', 'spoil(this)');
if (this.color === '') this.color = 'black';
if (this.expires === '' || < Date.parse(this.expires)) {
'background-color: ' + this.color + '; color: ' + this.color);
color: '',
expires: ''
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment