Allow using the modifier on SVG and math elements

Author: boris-petrov

ember-style-modifier/src/modifiers/style.ts

@@ -44,7 +44,7 @@ function compileStyles(
 }
 
 export interface StyleModifierSignature {
-  Element: HTMLElement;
+  // TODO: add `Element: ElementCSSInlineStyle & Element` once TypeScript marks `<math>` elements as `MathMLElement`
   Args: {
     Positional: CSSStyles[];
     Named: CSSStyles;

test-app/tests/integration/modifiers/style-test.ts

@@ -60,6 +60,18 @@ 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`<svg {{style display="none"}}></svg>`);
+
+    assert.dom('svg').hasStyle({ display: 'none' });
+  });
+
+  test('it supports usage on math elements', async function (assert) {
+    await render(hbs`<math {{style display="none"}}></math>`);
+
+    assert.dom('math').hasStyle({ display: 'none' });
+  });
+
   {
     interface Context extends TestContext {
       // eslint-disable-next-line @typescript-eslint/ban-types