diff --git a/src/generators/nodes/Attribute.ts b/src/generators/nodes/Attribute.ts
index fe9ad0270b..69d8808730 100644
--- a/src/generators/nodes/Attribute.ts
+++ b/src/generators/nodes/Attribute.ts
@@ -141,7 +141,7 @@ export default class Attribute {
shouldCache = true;
}
- if (node._needsCssAttribute && propertyName === 'className') {
+ if (node._needsCssAttribute && name === 'class') {
value = `(${value}) + " ${this.generator.stylesheet.id}"`;
}
@@ -228,7 +228,7 @@ export default class Attribute {
}
} else {
const isScopedClassAttribute = (
- propertyName === 'className' &&
+ name === 'class' &&
this.parent._needsCssAttribute &&
!this.generator.customElement
);
diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts
index 91749eb4ae..69997e077c 100644
--- a/src/generators/nodes/Element.ts
+++ b/src/generators/nodes/Element.ts
@@ -216,7 +216,9 @@ export default class Element extends Node {
if (this._needsCssAttribute && !this.generator.customElement) {
if (!this.attributes.find(a => a.type === 'Attribute' && a.name === 'class')) {
block.builders.hydrate.addLine(
- `${name}.className = "${this.generator.stylesheet.id}";`
+ this.namespace
+ ? `@setAttribute(${name}, "class", "${this.generator.stylesheet.id}");`
+ : `${name}.className = "${this.generator.stylesheet.id}";`
);
}
diff --git a/src/server-side-rendering/register.js b/src/server-side-rendering/register.js
index d50157140c..7940a2c487 100644
--- a/src/server-side-rendering/register.js
+++ b/src/server-side-rendering/register.js
@@ -2,7 +2,7 @@ import * as fs from 'fs';
import * as path from 'path';
import { compile } from '../index.ts';
-const compileOptions = {};
+let compileOptions = {};
function capitalise(name) {
return name[0].toUpperCase() + name.slice(1);
@@ -17,7 +17,7 @@ export default function register(options) {
}
// TODO make this the default and remove in v2
- if ('store' in options) compileOptions.store = options.store;
+ if (options) compileOptions = options;
}
function _deregister(extension) {
diff --git a/test/runtime/samples/svg-with-style/_config.js b/test/runtime/samples/svg-with-style/_config.js
new file mode 100644
index 0000000000..254a94d77d
--- /dev/null
+++ b/test/runtime/samples/svg-with-style/_config.js
@@ -0,0 +1,17 @@
+export default {
+ compileOptions: {
+ cascade: false
+ },
+
+ data: {
+ x: 'bar'
+ },
+
+ html: `
+
+ `
+};
diff --git a/test/runtime/samples/svg-with-style/main.html b/test/runtime/samples/svg-with-style/main.html
new file mode 100644
index 0000000000..24c7f4487c
--- /dev/null
+++ b/test/runtime/samples/svg-with-style/main.html
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js
index 019c452c2f..524b9486ff 100644
--- a/test/server-side-rendering/index.js
+++ b/test/server-side-rendering/index.js
@@ -110,10 +110,12 @@ describe("ssr", () => {
delete require.cache[resolved];
});
- require("../../ssr/register")({
+ const compileOptions = Object.assign(config.compileOptions || {}, {
store: !!config.store
});
+ require("../../ssr/register")(compileOptions);
+
try {
const component = require(`../runtime/samples/${dir}/main.html`);
const { html } = component.render(config.data, {