fix(useScriptTag): enable setting arbitrary attrs (#1511)

vueuse · Apr 20, 2022 · f8cd7a7 · f8cd7a7
1 parent c6407e1
commit f8cd7a7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/packages/core/useScriptTag/index.test.ts b/packages/core/useScriptTag/index.test.ts
@@ -54,6 +54,32 @@ describe('useScriptTag', () => {
     expect(scriptTagElement()).toBeInstanceOf(HTMLScriptElement)
   })
 
+  it('should support custom attributes', async() => {
+    const appendChildListener = vitest.spyOn(document.head, 'appendChild')
+
+    expect(appendChildListener).not.toBeCalled()
+
+    expect(scriptTagElement()).toBeNull()
+
+    useSetup(() => {
+      const { scriptTag } = useScriptTag(src, () => {}, {
+        attrs: { 'id': 'id-value', 'data-test': 'data-test-value' },
+        immediate: true,
+      })
+
+      return {
+        scriptTag,
+      }
+    })
+
+    expect(appendChildListener).toBeCalled()
+
+    const element = scriptTagElement()
+    expect(element).toBeInstanceOf(HTMLScriptElement)
+    expect(element?.getAttribute('id')).toBe('id-value')
+    expect(element?.getAttribute('data-test')).toBe('data-test-value')
+  })
+
   it('should remove script tag on unmount', async() => {
     const removeChildListener = vitest.spyOn(document.head, 'removeChild')
 

diff --git a/packages/core/useScriptTag/index.ts b/packages/core/useScriptTag/index.ts
@@ -117,8 +117,7 @@ export function useScriptTag(
       if (referrerPolicy)
         el.referrerPolicy = referrerPolicy
 
-      for (const attr in attrs)
-        (el as any)[attr] = attrs[attr]
+      Object.entries(attrs).forEach(([name, value]) => el?.setAttribute(name, value))
 
       // Enables shouldAppend
       shouldAppend = true