diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2e4c7a1..66354b4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -14,7 +14,7 @@ jobs:
 
       - uses: purescript-contrib/setup-purescript@main
         with:
-          purescript: "0.14.0-rc3"
+          purescript: "0.14.0-rc5"
 
       - uses: actions/setup-node@v1
         with:
diff --git a/src/Web/DOM/Element.js b/src/Web/DOM/Element.js
index cf7dd6a..3ca6e1d 100644
--- a/src/Web/DOM/Element.js
+++ b/src/Web/DOM/Element.js
@@ -170,3 +170,11 @@ exports.clientHeight = function (el) {
     return el.clientHeight;
   };
 };
+
+exports._attachShadow = function(props) {
+  return function (el) {
+    return function() {
+      return el.attachShadow(props);
+    };
+  };
+};
diff --git a/src/Web/DOM/Element.purs b/src/Web/DOM/Element.purs
index 58e9ed1..5c1c10c 100644
--- a/src/Web/DOM/Element.purs
+++ b/src/Web/DOM/Element.purs
@@ -36,6 +36,8 @@ module Web.DOM.Element
   , clientLeft
   , clientWidth
   , clientHeight
+  , ShadowRootInit
+  , attachShadow
   ) where
 
 import Prelude
@@ -50,6 +52,7 @@ import Web.DOM.Internal.Types (Element) as Exports
 import Web.DOM.Internal.Types (Element, HTMLCollection, Node)
 import Web.DOM.NonDocumentTypeChildNode (NonDocumentTypeChildNode)
 import Web.DOM.ParentNode (ParentNode)
+import Web.DOM.ShadowRoot (ShadowRoot, ShadowRootMode)
 import Web.Event.EventTarget (EventTarget)
 import Web.Internal.FFI (unsafeReadProtoTagged)
 
@@ -130,3 +133,24 @@ foreign import clientTop :: Element -> Effect Number
 foreign import clientLeft :: Element -> Effect Number
 foreign import clientWidth :: Element -> Effect Number
 foreign import clientHeight :: Element -> Effect Number
+
+type ShadowRootInit = {
+  mode :: ShadowRootMode,
+  delegatesFocus :: Boolean
+}
+
+attachShadow :: ShadowRootInit -> Element -> Effect ShadowRoot
+attachShadow = _attachShadow <<< initToProps
+
+type ShadowRootProps = {
+  mode :: String,
+  delegatesFocus :: Boolean
+}
+
+initToProps :: ShadowRootInit -> ShadowRootProps
+initToProps init = {
+  mode: show init.mode,
+  delegatesFocus: init.delegatesFocus
+}
+
+foreign import _attachShadow :: ShadowRootProps -> Element -> Effect ShadowRoot
diff --git a/src/Web/DOM/ShadowRoot.js b/src/Web/DOM/ShadowRoot.js
new file mode 100644
index 0000000..24a0cba
--- /dev/null
+++ b/src/Web/DOM/ShadowRoot.js
@@ -0,0 +1,11 @@
+"use strict";
+
+exports._mode = function (el) {
+  return el.mode;
+};
+
+exports.host = function (el) {
+  return function() {
+    return el.host;
+  };
+};
diff --git a/src/Web/DOM/ShadowRoot.purs b/src/Web/DOM/ShadowRoot.purs
new file mode 100644
index 0000000..c51e89a
--- /dev/null
+++ b/src/Web/DOM/ShadowRoot.purs
@@ -0,0 +1,35 @@
+module Web.DOM.ShadowRoot
+  ( ShadowRoot
+  , ShadowRootMode (..)
+  , toNode
+  , host
+  , mode
+  ) where
+
+import Prelude
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Unsafe.Coerce (unsafeCoerce)
+import Web.DOM.Internal.Types (Element, Node)
+
+foreign import data ShadowRoot :: Type
+
+toNode :: ShadowRoot -> Node
+toNode = unsafeCoerce
+
+data ShadowRootMode = Open | Closed
+
+instance showShadowRootMode :: Show ShadowRootMode where
+  show Open = "open"
+  show Closed = "closed"
+
+mode :: ShadowRoot -> Maybe ShadowRootMode
+mode = modeFromString <<< _mode
+  where
+    modeFromString = case _ of
+      "open" -> Just Open
+      "closed" -> Just Closed
+      _ -> Nothing
+
+foreign import host :: ShadowRoot -> Effect Element
+foreign import _mode :: ShadowRoot -> String