slide data-state is now set at the viewport level, add Reveal.getViewportElement()

js/reveal.js

@@ -146,16 +146,16 @@ export default function( revealElement, options ) {
 
 		// Embedded decks use the reveal element as their viewport
 		if( config.embedded === true ) {
-			if( revealElement.closest( '.reveal-viewport' ) === null ) {
-				revealElement.classList.add( 'reveal-viewport' );
-			}
+			dom.viewport = revealElement.closest( '.reveal-viewport' ) || revealElement;
 		}
 		// Full-page decks use the body as their viewport
 		else {
-			document.body.classList.add( 'reveal-viewport' );
+			dom.viewport = document.body;
 			document.documentElement.classList.add( 'reveal-full-page' );
 		}
 
+		dom.viewport.classList.add( 'reveal-viewport' );
+
 	}
 
 	/**
@@ -1273,7 +1273,7 @@ export default function( revealElement, options ) {
 				}
 			}
 
-			document.documentElement.classList.add( state[i] );
+			dom.viewport.classList.add( state[i] );
 
 			// Dispatch custom event matching the state's name
 			dispatchEvent({ type: state[i] });
@@ -1281,7 +1281,7 @@ export default function( revealElement, options ) {
 
 		// Clean up the remains of the previous state
 		while( stateBefore.length ) {
-			document.documentElement.classList.remove( stateBefore.pop() );
+			dom.viewport.classList.remove( stateBefore.pop() );
 		}
 
 		if( slideChanged ) {
@@ -2524,6 +2524,7 @@ export default function( revealElement, options ) {
 		// Returns reveal.js DOM elements
 		getRevealElement: () => revealElement,
 		getSlidesElement: () => dom.slides,
+		getViewportElement: () => dom.viewport,
 		getBackgroundsElement: () => backgrounds.element,
 
 		// API for registering and retrieving plugins

test/test-multiple-instances.html

@@ -20,7 +20,7 @@
 			<div class="reveal" style="display: none;">
 				<div class="slides">
 					<section>1.1</section>
-					<section>1.2</section>
+					<section data-state="deck1slide2">1.2</section>
 					<section>1.3</section>
 				</div>
 			</div>
@@ -80,6 +80,18 @@
 
 			});
 
+			QUnit.test( 'Slide state is set at the viewport level', function( assert ) {
+
+				r1.slide(1);
+
+				assert.ok( r1.getViewportElement().classList.contains( r1.getCurrentSlide().getAttribute( 'data-state' ) ) );
+
+				r1.slide(2);
+
+				assert.ok( !r1.getViewportElement().classList.contains( r1.getCurrentSlide().getAttribute( 'data-state' ) ), 'unset' );
+
+			});
+
 		</script>
 		<script>
 			QUnit.test( 'Reveal does not leak to window', function( assert ) {