This weekend, I about a web component experiment wrapping the excellent presentation library. In that post, I created a component to wrap tags that represented individual slides. blogged Reveal.js <section> I mentioned that I wanted to follow up on this and create a "child" component to represent slides. Here's what I did - including my first version which failed for a pretty obvious reason. Version One - That I Did Wrong on Purpose to Test My Readers - Honest. Alright, so in my initial , I created the tag. Here's an example of how such a component would work: post <reveal-preso> <reveal-preso height="700px" theme="dracula">
	<section>Slide 1b</section>
	<section>
		<h2>Plan</h2>
		<ul>
			<li class="fragment">Phase One - Collect Underpants</li>
			<li class="fragment">Phase Two - ?</li>
			<li class="fragment">Phase Three - Profit</li>
		</ul>
	</section>
	<section>Slide 3</section>
	<section data-background-color="aquamarine">
		<h2>🍦</h2>
	</section>
	<section data-background-image="https://placekitten.com/800/800">
		<h2>Image</h2>
	</section>	
</reveal-preso> My plan was to simply replace with a new component, . My initial, flawed implementation, was super simple: <section> <reveal-slide> class RevealSlide extends HTMLElement {
	constructor() {
		super();
	}
	
	connectedCallback() {
		console.log('RS connected callback called');
		let currentHTML = this.innerHTML;
		this.innerHTML = `<section>${currentHTML}</section>`;
	}
}

if(!customElements.get('reveal-slide')) customElements.define('reveal-slide', RevealSlide); I then edited my HTML to add one on top: <reveal-preso height="700px" theme="dracula">
	<reveal-slide>Reveal Slide</reveal-slide>
	<section>Slide 1b</section>
	
</reveal-preso> I intentionally just added one because I figured the other slides would continue to work as before. However, the result was broken: I've been using Reveal for a long time, and typically when this happens, it means I made a typo somewhere in my HTML. So I did what any good web developer should do - open up my dev tools. When I did, I saw this: run to StackOverflow and In case that's a bit hard to read, it's basically showing this: <reveal-preso ...>
	<reveal-slide>
		<section> ... </section>
	</reveal-slide>
	<section> ... </section>
	<section> ... </section>
</reveal-preso> Reveal expects tags immediately under the wrapper with . Since it was "under" the original web component, it wasn't found and properly handled by Reveal. top-level <section> <div> class="slides" In case you want to see this broken version, you can find it below. https://codepen.io/cfjedimaster/pen/jOeByGq?embedable=true Version Two - The Perfect One I Meant to Do All Along Fixing it ended up being rather easy, although I'm not entirely sure how "proper" this is for web components, but one of the fun things about building demos on the web is seeing what you can use in the wrong way. I simply replaced my web component instance with a new tag: section let currentHTML = this.innerHTML;
let section = document.createElement('section');
section.innerHTML = `${currentHTML}`;
this.parentNode.replaceChild(section, this); This works, but of course, my web component is basically self-destructing. If I wanted to do things like handle attribute changes and the such, as far as I know, it wouldn't work. But in terms of the presentation, it worked just fine. I then decided to take it one step further. Reveal slides can be modified with data attributes, so for example: <section data-background-image="https://placekitten.com/800/800">
	<h2>Image</h2>
</section> "Proper" HTML allows for custom attribute as long as you prefix it with , and then you can get and manipulate those attributes as you see fit. any data For my web component, I thought it would be cool to allow you to use all of the attributes Reveal supports, but without the prefix: data- <reveal-slide background-color="red">Red Reveal Slide</reveal-slide>
<reveal-slide background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
<h2>🐟</h2>
</reveal-slide>
<reveal-slide background-image="https://placekitten.com/800/800">
	<h2>Image</h2>
</reveal-slide> To support this, I checked the property of my web component instance. For reach, I find, I simply prefix it with . attributes data- for(let i=0; i<this.attributes.length; i++) {
	section.setAttribute(`data-${this.attributes[i].name}`, this.attributes[i].value);
} Now, this would be bad for standard attributes like , , etc. But Reveal doesn't really use those for slides. id width All in all, this really "reads" nicely to me: <reveal-preso height="700px" theme="dracula">
	<reveal-slide>Reveal Slide</reveal-slide>
	<reveal-slide background-color="red">Red Reveal Slide</reveal-slide>
	<reveal-slide background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
  	<h2>🐟</h2>
	</reveal-slide>
	<reveal-slide>
		<h2>Plan</h2>
		<ul>
			<li class="fragment">Phase One - Collect Underpants</li>
			<li class="fragment">Phase Two - ?</li>
			<li class="fragment">Phase Three - Profit</li>
		</ul>
	</reveal-slide>
	<reveal-slide background-image="https://placekitten.com/800/800">
		<h2>Image</h2>
	</reveal-slide>	
</reveal-preso> Feel free to play with, and fork, this version: https://codepen.io/cfjedimaster/pen/QWZpdmE?embedable=true

How to Update and Support URL Parameters in JavaScript

How to Create a Web Component for Reveal.js

My Blog

My Follow-up to Creating a Web Component for Reveal.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Cat-Centric Guide to Using Web Components in Alpine.js

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 Use Cases for Using Laravel to Build Web App Development Projects

10 Things You Can Do Better While Working With Programmers

10 Prioritization Techniques for Agile Product Development

A Cat-Centric Guide to Using Web Components in Alpine.js

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 Use Cases for Using Laravel to Build Web App Development Projects

10 Things You Can Do Better While Working With Programmers

10 Prioritization Techniques for Agile Product Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps