set data- attributes like regular attributes (#3337)

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

@@ -70,11 +70,6 @@ export default class AttributeWrapper {
 
 		const is_legacy_input_type = element.renderer.component.compile_options.legacy && name === 'type' && this.parent.node.name === 'input';
 
-		const is_dataset = /^data-/.test(name) && !element.renderer.component.compile_options.legacy && !element.node.namespace;
-		const camel_case_name = is_dataset ? name.replace('data-', '').replace(/(-\w)/g, (m) => {
-			return m[1].toUpperCase();
-		}) : name;
-
 		if (this.node.is_dynamic) {
 			let value;
 
@@ -145,11 +140,6 @@ export default class AttributeWrapper {
 					`${element.var}.${property_name} = ${init};`
 				);
 				updater = `${element.var}.${property_name} = ${should_cache ? last : value};`;
-			} else if (is_dataset) {
-				block.builders.hydrate.add_line(
-					`${element.var}.dataset.${camel_case_name} = ${init};`
-				);
-				updater = `${element.var}.dataset.${camel_case_name} = ${should_cache ? last : value};`;
 			} else {
 				block.builders.hydrate.add_line(
 					`${method}(${element.var}, "${name}", ${init});`
@@ -184,9 +174,7 @@ export default class AttributeWrapper {
 					? `@set_input_type(${element.var}, ${value});`
 					: property_name
 						? `${element.var}.${property_name} = ${value};`
-						: is_dataset
+						: `${method}(${element.var}, "${name}", ${value === true ? '""' : value});`
-							? `${element.var}.dataset.${camel_case_name} = ${value === true ? '""' : value};`
-							: `${method}(${element.var}, "${name}", ${value === true ? '""' : value});`
 			);
 
 			block.builders.hydrate.add_line(statement);

test/js/samples/do-use-dataset/expected.js

@@ -1,6 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
+	attr,
 	detach,
 	element,
 	init,
@@ -18,8 +19,8 @@ function create_fragment(ctx) {
 			div0 = element("div");
 			t = space();
 			div1 = element("div");
-			div0.dataset.foo = "bar";
+			attr(div0, "data-foo", "bar");
-			div1.dataset.foo = ctx.bar;
+			attr(div1, "data-foo", ctx.bar);
 		},
 
 		m(target, anchor) {
@@ -30,7 +31,7 @@ function create_fragment(ctx) {
 
 		p(changed, ctx) {
 			if (changed.bar) {
-				div1.dataset.foo = ctx.bar;
+				attr(div1, "data-foo", ctx.bar);
 			}
 		},