diff --git a/bower.json b/bower.json
index bf5253a..a78ecc3 100644
--- a/bower.json
+++ b/bower.json
@@ -19,6 +19,9 @@
   "dependencies": {
     "polymer": "^1.7.0"
   },
+  "devDependencies": {
+    "d2l-demo-template": "~0.0.5"
+  },
   "ignore": [
     ".editorconfig",
     ".eslintrc",
diff --git a/d2l-offscreen-shared-styles.html b/d2l-offscreen-shared-styles.html
index 7069d2e..4a44d4b 100644
--- a/d2l-offscreen-shared-styles.html
+++ b/d2l-offscreen-shared-styles.html
@@ -2,7 +2,7 @@
 <dom-module id="d2l-offscreen-shared-styles">
 	<template>
 		<style>
-			html {
+			:host {
 				--d2l-offscreen: {
 					position: absolute !important;
 					left: -10000px;
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..8d95f6f
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+	<title>d2l-offscreen</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents.min.js"></script>
+	<link rel="import" href="../../d2l-demo-template/d2l-demo-template.html">
+	<link rel="import" href="../d2l-offscreen.html">
+</head>
+<body unresolved>
+
+	<d2l-demo-template title="d2l-offscreen">
+
+		<div class="d2l-demo-fixture">
+			Some offscreen content: <d2l-offscreen>this should be offscreen</d2l-offscreen>
+		</div>
+
+	</d2l-demo-template>
+
+</body>
+</html>
diff --git a/package.json b/package.json
index 65ea423..19aa10f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d2l-offscreen",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Polymer web component and Sass mixin for positioning elements offscreen",
   "private": true,
   "scripts": {
