{{style}} modifier to set an element's style using the CSSStyleDeclaration API.
npm install ember-style-modifier
This addon provides a {{style}} element modifier to set element's style.
This allows to set custom CSS of an element without requiring a Content Security Policy style-src-attr: "unsafe-inline".
* Ember.js v3.28 or above
* Ember CLI v3.28 or above
* Node.js v18 or above
``sh`
ember install ember-style-modifier
It expects CSS declarations as named arguments or as a hash as positional
argument. Property names are supported in dasherized as well as in camelCase
spelling. Value must be a string or undefined. You may set a priority by"!important"
adding an suffix.
`gjs
import { style } from 'ember-style-modifier';
border="1px"
padding="1em !important"
}}
>
(hash border="1px" padding="1em !important")
}}
>
hbs
border="1px"
padding="1em !important"
}}
>
(hash border="1px" padding="1em !important")
}}
>
`You may pass multiple hashes as positional arguments and combine hashes
with named arguments. If multiple hashes are passed and contain CSS
declarations for the same property, last one wins. If hashes and named
arguments declare same property, named argument wins.
Adding styles to pseudo-elements is not supported.
Known limitations
Ember Style Modifier suffers from two known limitations of Modifiers
in Ember. Both need to be addressed by extending modifiers capabilities.
Doing so, is discussed in a RFC issue.
$3
Modifiers do not run in server-side rendering (SSR). Styles set using
Modifiers run _after_ browser has printed the page. If styles are
applied to an elements immediately, the browser first renders the
element _without_ those styles applied and immediately afterwards
with these styles applied.
This may theoretically cause the experience of a flickering user
interface. But such a case has not been noticed yet in practice.
Rendering the element twice has a performance impact. But it should
not have any noticeable impact in practice.
See the Contributing guide for details.
This project is licensed under the MIT License.