From b5531a710ba2c716ef20f28bb23417c48944ae72 Mon Sep 17 00:00:00 2001
From: Dave Batiste <dave.batiste@d2l.com>
Date: Mon, 28 Nov 2016 00:34:45 -0500
Subject: [PATCH 1/2] Change root selector to :host.

---
 d2l-offscreen-shared-styles.html | 2 +-
 package.json                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
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/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": {

From f9866e55db2db5d8f73dba277d4ba491ffb9f5f8 Mon Sep 17 00:00:00 2001
From: Dave Batiste <dave.batiste@d2l.com>
Date: Mon, 28 Nov 2016 00:35:19 -0500
Subject: [PATCH 2/2] Add demo page.

---
 bower.json      |  3 +++
 demo/index.html | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 demo/index.html

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/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>
