diff --git a/ember-style-modifier/src/modifiers/style.ts b/ember-style-modifier/src/modifiers/style.ts index f694d3ab..0ef58e90 100644 --- a/ember-style-modifier/src/modifiers/style.ts +++ b/ember-style-modifier/src/modifiers/style.ts @@ -44,7 +44,7 @@ function compileStyles( } export interface StyleModifierSignature { - Element: HTMLElement; + Element: HTMLElement | SVGElement; Args: { Positional: CSSStyles[]; Named: CSSStyles; @@ -54,7 +54,10 @@ export interface StyleModifierSignature { export default class StyleModifier extends Modifier { existingStyles: Set = new Set(); - setStyles(element: HTMLElement, newStyles: [string, string][]) { + setStyles( + element: StyleModifierSignature['Element'], + newStyles: [string, string][], + ) { const { existingStyles } = this; const rulesToRemove: Set = new Set(existingStyles); @@ -92,7 +95,11 @@ export default class StyleModifier extends Modifier { rulesToRemove.forEach((rule) => element.style.removeProperty(rule)); } - modify(element: HTMLElement, positional: [CSSStyles] | [], named: CSSStyles) { + modify( + element: StyleModifierSignature['Element'], + positional: [CSSStyles] | [], + named: CSSStyles, + ) { this.setStyles(element, compileStyles(positional, named)); } } diff --git a/test-app/tests/integration/modifiers/style-test.ts b/test-app/tests/integration/modifiers/style-test.ts index e6e72dcb..cdb80cd5 100644 --- a/test-app/tests/integration/modifiers/style-test.ts +++ b/test-app/tests/integration/modifiers/style-test.ts @@ -60,6 +60,14 @@ module('Integration | Modifiers | style', function (hooks) { assert.dom('p').hasStyle({ fontSize: '6px' }); }); + test('it supports usage on SVG elements', async function (assert) { + await render( + hbs``, + ); + + assert.dom('svg').hasStyle({ display: 'none' }); + }); + { interface Context extends TestContext { // eslint-disable-next-line @typescript-eslint/ban-types