allow SVG elements to have scoped CSS - fixes #1224

pull/1226/head
Rich Harris 7 years ago
parent d9136d97ae
commit b763714222

@ -141,7 +141,7 @@ export default class Attribute {
shouldCache = true; shouldCache = true;
} }
if (node._needsCssAttribute && propertyName === 'className') { if (node._needsCssAttribute && name === 'class') {
value = `(${value}) + " ${this.generator.stylesheet.id}"`; value = `(${value}) + " ${this.generator.stylesheet.id}"`;
} }
@ -228,7 +228,7 @@ export default class Attribute {
} }
} else { } else {
const isScopedClassAttribute = ( const isScopedClassAttribute = (
propertyName === 'className' && name === 'class' &&
this.parent._needsCssAttribute && this.parent._needsCssAttribute &&
!this.generator.customElement !this.generator.customElement
); );

@ -216,7 +216,9 @@ export default class Element extends Node {
if (this._needsCssAttribute && !this.generator.customElement) { if (this._needsCssAttribute && !this.generator.customElement) {
if (!this.attributes.find(a => a.type === 'Attribute' && a.name === 'class')) { if (!this.attributes.find(a => a.type === 'Attribute' && a.name === 'class')) {
block.builders.hydrate.addLine( block.builders.hydrate.addLine(
`${name}.className = "${this.generator.stylesheet.id}";` this.namespace === namespaces.svg
? `@setAttribute(${name}, "class", "${this.generator.stylesheet.id}");`
: `${name}.className = "${this.generator.stylesheet.id}";`
); );
} }

@ -0,0 +1,17 @@
export default {
compileOptions: {
cascade: false
},
data: {
x: 'bar'
},
html: `
<svg>
<circle class="svelte-i03x00" cx=50 cy=50 r=50 />
<circle class="foo svelte-i03x00" cx=150 cy=50 r=50 />
<circle class="bar svelte-i03x00" cx=250 cy=50 r=50 />
</svg>
`
};

@ -0,0 +1,11 @@
<svg>
<circle cx=50 cy=50 r=50/>
<circle class='foo' cx=150 cy=50 r=50/>
<circle class='{{x}}' cx=250 cy=50 r=50/>
</svg>
<style>
circle {
fill: red;
}
</style>

After

Width:  |  Height:  |  Size: 168 B

Loading…
Cancel
Save