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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="http://www.polymer-project.org/polymer.min.js"></script> | |
| <link rel="import" href="spoiler.html"> | |
| </head> | |
| <body> | |
| <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> | |
| </body> | |
| </html> |
| <polymer-element name="x-spoiler" constructor="Spoiler" attributes="color expires"> | |
| <template> | |
| <style> | |
| @host { | |
| * { display: inline-block; } | |
| *:hover { cursor: pointer; } | |
| } | |
| </style> | |
| <span id='spoiler'></span> | |
| </template> | |
| <script> | |
| function spoil(o) { | |
| o.style.backgroundColor = o.parentElement.style.backgroundColor; | |
| o.style.color= o.parentElement.style.color; | |
| } | |
| 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.now() < Date.parse(this.expires)) { | |
| e.setAttribute('style', | |
| 'background-color: ' + this.color + '; color: ' + this.color); | |
| } | |
| }, | |
| color: '', | |
| expires: '' | |
| }); | |
| </script> | |
| </polymer-element> |