diff --git a/test/custom-elements/samples/shadowdom-closed/main.svelte b/test/custom-elements/samples/shadowdom-closed/main.svelte
new file mode 100644
index 0000000000..43c2300bc0
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-closed/main.svelte
@@ -0,0 +1,8 @@
+<svelte:options tag="custom-element" shadowdom="closed" />
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
+
diff --git a/test/custom-elements/samples/shadowdom-closed/test.js b/test/custom-elements/samples/shadowdom-closed/test.js
new file mode 100644
index 0000000000..be2b9743e0
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-closed/test.js
@@ -0,0 +1,13 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<custom-element name="world"></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	assert.equal(el.name, 'world');
+
+	const h1 = el._root.querySelector('h1');
+  assert.equal(h1.textContent, 'Hello world');
+  assert.equal(el.shadowRoot, null);
+}
\ No newline at end of file
diff --git a/test/custom-elements/samples/shadowdom-none-css/main.svelte b/test/custom-elements/samples/shadowdom-none-css/main.svelte
new file mode 100644
index 0000000000..20061da3cb
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none-css/main.svelte
@@ -0,0 +1,10 @@
+<svelte:options tag="custom-element" shadowdom="none" />
+
+<style>
+  h1 {
+    color:red; 
+  }
+</style>
+
+<h1>Hello World</h1>
+
diff --git a/test/custom-elements/samples/shadowdom-none-css/test.js b/test/custom-elements/samples/shadowdom-none-css/test.js
new file mode 100644
index 0000000000..9f6ec3c20e
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none-css/test.js
@@ -0,0 +1,10 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<custom-element></custom-element>';
+	const el = target.querySelector('custom-element');
+	const h1 = el.querySelector('h1');
+  const colour = getComputedStyle(h1).color;
+  assert.equal(colour,"rgb(255, 0, 0)");
+}
\ No newline at end of file
diff --git a/test/custom-elements/samples/shadowdom-none/main.svelte b/test/custom-elements/samples/shadowdom-none/main.svelte
new file mode 100644
index 0000000000..79a40384ec
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none/main.svelte
@@ -0,0 +1,8 @@
+<svelte:options tag="custom-element" shadowdom="none" />
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
+
diff --git a/test/custom-elements/samples/shadowdom-none/test.js b/test/custom-elements/samples/shadowdom-none/test.js
new file mode 100644
index 0000000000..7cd82a30ee
--- /dev/null
+++ b/test/custom-elements/samples/shadowdom-none/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<custom-element name="world"></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	assert.equal(el.name, 'world');
+
+	const h1 = el.querySelector('h1');
+	assert.equal(h1.textContent, 'Hello world!');
+}
\ No newline at end of file