Merge pull request #26 from github/shadowroot

Add support for Shadow DOM follow-up

Author: muan

package-lock.json

@@ -30,7 +30,7 @@
     "chai": "^4.2.0",
     "eslint": "^6.5.1",
     "eslint-plugin-github": "^3.1.3",
-    "flow-bin": "^0.109.0",
+    "flow-bin": "^0.111.1",
     "karma": "^4.3.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",

package.json

@@ -13,7 +13,9 @@ function copy(button: HTMLElement) {
   if (text) {
     copyText(text).then(trigger)
   } else if (id) {
-    const node = button.ownerDocument.getElementById(id)
+    const root = 'getRootNode' in Element.prototype ? button.getRootNode() : button.ownerDocument
+    if (!(root instanceof Document || ('ShadowRoot' in window && root instanceof ShadowRoot))) return
+    const node = root.getElementById(id)
     if (node) copyTarget(node).then(trigger)
   }
 }

src/clipboard-copy-element.js

@@ -37,16 +37,6 @@ describe('clipboard-copy element', function() {
 
   describe('target element', function() {
     const nativeClipboard = navigator.clipboard
-    function defineClipboard(customClipboard) {
-      Object.defineProperty(navigator, 'clipboard', {
-        enumerable: false,
-        configurable: true,
-        get() {
-          return customClipboard
-        }
-      })
-    }
-
     let whenCopied
     beforeEach(function() {
       const container = document.createElement('div')
@@ -160,4 +150,61 @@ describe('clipboard-copy element', function() {
       })
     })
   })
+
+  describe('shadow DOM context', function() {
+    const nativeClipboard = navigator.clipboard
+    let whenCopied
+    beforeEach(function() {
+      const container = document.createElement('div')
+      container.id = 'shadow'
+      const elementInDocument = document.createElement('div')
+      elementInDocument.id = 'copy-target'
+      elementInDocument.textContent = 'Target in Document'
+      const shadowRoot = container.attachShadow({mode: 'open'})
+      shadowRoot.innerHTML = `
+        <clipboard-copy for="copy-target">
+          Copy
+        </clipboard-copy>
+        <div id="copy-target">Target in shadowRoot</div>`
+      document.body.append(container)
+      document.body.append(elementInDocument)
+      container.click()
+
+      let copiedText = null
+      defineClipboard({
+        writeText(text) {
+          copiedText = text
+          return Promise.resolve()
+        }
+      })
+
+      whenCopied = new Promise(resolve => {
+        shadowRoot.addEventListener('clipboard-copy', () => resolve(copiedText), {once: true})
+      })
+    })
+
+    afterEach(function() {
+      document.body.innerHTML = ''
+      defineClipboard(nativeClipboard)
+    })
+
+    it('copies from within its shadow root', function() {
+      const shadow = document.querySelector('#shadow')
+      shadow.shadowRoot.querySelector('clipboard-copy').click()
+
+      return whenCopied.then(text => {
+        assert.equal(text, 'Target in shadowRoot')
+      })
+    })
+  })
 })
+
+function defineClipboard(customClipboard) {
+  Object.defineProperty(navigator, 'clipboard', {
+    enumerable: false,
+    configurable: true,
+    get() {
+      return customClipboard
+    }
+  })
+}