fix(runtome-dom): properly support creating customized built-in element

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 929ea38fd20dd10e60e02a47e5f8e82afa18ae73..1fc36b4d63d337584f98b10c8afa6c3021985f5a 100644 (file)
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -102,7 +102,11 @@ export interface RendererOptions<
   ): void
   insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
   remove(el: HostNode): void
-  createElement(type: string, isSVG?: boolean): HostElement
+  createElement(
+    type: string,
+    isSVG?: boolean,
+    isCustomizedBuiltIn?: string
+  ): HostElement
   createText(text: string): HostNode
   createComment(text: string): HostNode
   setText(node: HostNode, text: string): void
@@ -549,7 +553,11 @@ function baseCreateRenderer(
       // exactly the same, and we can simply do a clone here.
       el = vnode.el = hostCloneNode(vnode.el)
     } else {
-      el = vnode.el = hostCreateElement(vnode.type as string, isSVG)
+      el = vnode.el = hostCreateElement(
+        vnode.type as string,
+        isSVG,
+        props && props.is
+      )
       // props
       if (props) {
         for (const key in props) {

diff --git a/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts b/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts
new file mode 100644 (file)
index 0000000..4d957af
--- /dev/null
+++ b/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts
@@ -0,0 +1,20 @@
+import { render, h } from '@vue/runtime-dom'
+
+describe('customimized built-in elements support', () => {
+  let createElement: jest.SpyInstance
+  afterEach(() => {
+    createElement.mockRestore()
+  })
+
+  test('should created element with is option', () => {
+    const root = document.createElement('div')
+    createElement = jest.spyOn(document, 'createElement')
+    render(h('button', { is: 'plastic-button' }), root)
+    expect(createElement.mock.calls[0]).toMatchObject([
+      'button',
+      { is: 'plastic-button' }
+    ])
+    // should also render the attribute
+    expect(root.innerHTML).toBe(`<button is="plastic-button"></button>`)
+  })
+})

diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index e19815abc157e00268ded3c026c2763734c0b7ab..38b494ebbc50250414d9f485effe9a8a1047f05a 100644 (file)
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -22,8 +22,10 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
     }
   },
 
-  createElement: (tag, isSVG): Element =>
-    isSVG ? doc.createElementNS(svgNS, tag) : doc.createElement(tag),
+  createElement: (tag, isSVG, is): Element =>
+    isSVG
+      ? doc.createElementNS(svgNS, tag)
+      : doc.createElement(tag, is ? { is } : undefined),
 
   createText: text => doc.createTextNode(text),