support is attribute, with a warning - fixes #3182

Author: Rich-Harris

src/compiler/compile/nodes/Element.ts

@@ -415,6 +415,13 @@ export default class Element extends Node {
 				}
 			}
 
+			if (name === 'is') {
+				component.warn(attribute, {
+					code: 'avoid-is',
+					message: `The 'is' attribute is not supported cross-browser and should be avoided`
+				});
+			}
+
 			attribute_map.set(attribute.name, attribute);
 		});
 

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -383,6 +383,11 @@ export default class ElementWrapper extends Wrapper {
 			return `@_document.createElementNS("${namespace}", "${name}")`;
 		}
 
+		const is = this.attributes.find(attr => attr.node.name === 'is');
+		if (is) {
+			return `@element_is("${name}", ${is.render_chunks().join(' + ')});`
+		}
+
 		return `@element("${name}")`;
 	}
 

src/runtime/internal/dom.ts

@@ -20,6 +20,10 @@ export function element<K extends keyof HTMLElementTagNameMap>(name: K) {
 	return document.createElement<K>(name);
 }
 
+export function element_is<K extends keyof HTMLElementTagNameMap>(name: K, is: string) {
+	return document.createElement<K>(name, { is });
+}
+
 export function object_without_properties<T, K extends keyof T>(obj: T, exclude: K[]) {
 	// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
 	const target = {} as Pick<T, Exclude<keyof T, K>>;

test/custom-elements/samples/extended-builtin/_config.js

@@ -0,0 +1,17 @@
+export default {
+	warnings: [{
+		code: "avoid-is",
+		message: "The 'is' attribute is not supported cross-browser and should be avoided",
+		pos: 97,
+		start: {
+			character: 97,
+			column: 8,
+			line: 7
+		},
+		end: {
+			character: 114,
+			column: 25,
+			line: 7
+		}
+	}]
+};

test/custom-elements/samples/extended-builtin/fancy-button.js

@@ -0,0 +1,2 @@
+class FancyButton extends HTMLButtonElement {}
+customElements.define('fancy-button', FancyButton, { extends: 'button' });

test/custom-elements/samples/extended-builtin/main.svelte

@@ -0,0 +1,7 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+	import './fancy-button.js';
+</script>
+
+<button is="fancy-button">click me</button>

test/custom-elements/samples/extended-builtin/test.js

@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	assert.equal(target.innerHTML, '<custom-element></custom-element>');
+
+	const el = target.querySelector('custom-element');
+	const button = el.shadowRoot.querySelector('button');
+
+	assert.ok(button instanceof customElements.get('fancy-button'));
+}