From b1d0b046afb1e8f4640d8d80b6eeaf9f89e892f7 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 27 Mar 2020 12:38:47 -0400
Subject: [PATCH] fix(runtome-dom): properly support creating customized
 built-in element

---
 packages/runtime-core/src/renderer.ts         | 12 +++++++++--
 .../__tests__/customizedBuiltIn.spec.ts       | 20 +++++++++++++++++++
 packages/runtime-dom/src/nodeOps.ts           |  6 ++++--
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 929ea38fd20..1fc36b4d63d 100644
--- 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
index 00000000000..4d957affe70
--- /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 e19815abc15..38b494ebbc5 100644
--- 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),