Directory

← Back

grain-update-inline-style-behavior

(no summary available)

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/daKmoR/grain-update-inline-style-behavior on 2019-05-10 ]

Published on webcomponents.org Polymer Version

<grain-update-inline-style-behavior>

In order for inline styles to work with Browsers not supporting CSS Custom Properties you will have to save your style into data-style as well. This behavior will extend updateStyles() to parse data-style and merge it with your styles.

Demo

<grain-update-inline-style-behavior-example style="--background: yellow;" data-style="--background: yellow;">
    I am an element with some inline style. <br />
    My Background will be yellow even on Browsers not supporting CSS Custom Properties. <br />
    For it to work data-style will need to be the same as style in the HTML.
</grain-update-inline-style-behavior-example>

Installation

$ bower install --save daKmoR/grain-update-inline-style-behavior

Getting Started

Import the package.

<link rel="import" href="/bower_components/grain-update-inline-style-behavior/grain-update-inline-style-behavior.html">

Create your element using this behavior.

class GrainUpdateInlineStyleBehaviorExample extends GrainUpdateInlineStyleBehavior(Polymer.Element) {
  // your code
}

Insert your element with style and data-style

<grain-update-inline-style-behavior-example style="--background: yellow;" data-style="--background: yellow;">
  Create Element with style AND data-style
</grain-update-inline-style-behavior-example>

For more information, see the API documentation.

Working on the Element

First, make sure you have the Polymer CLI installed.

  • View the Element via polymer serve
  • Run tests via polymer test

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#>=2.0.0-rc.2 <3.0

Released
2017-05-25
Maturity
TESTED
License
Other

Compatibility

Framework
Polymer 1.0+
Browser
Browser Independent

grain-update-inline-style-behavior - Vaadin Add-on Directory

(no summary available) grain-update-inline-style-behavior - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/daKmoR/grain-update-inline-style-behavior](https://github.com//daKmoR/grain-update-inline-style-behavior/blob/v0.8.1/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/daKmoR/grain-update-inline-style-behavior) [![Polymer Version](https://img.shields.io/badge/polymer-v2-blue.svg)](https://www.polymer-project.org) # \ In order for inline styles to work with Browsers not supporting CSS Custom Properties you will have to save your style into data-style as well. This behavior will extend updateStyles() to parse data-style and merge it with your styles. ## Demo ```html I am an element with some inline style.
My Background will be yellow even on Browsers not supporting CSS Custom Properties.
For it to work data-style will need to be the same as style in the HTML.
``` ## Installation ```sh $ bower install --save daKmoR/grain-update-inline-style-behavior ``` ## Getting Started Import the package. ```html ``` Create your element using this behavior. ```js class GrainUpdateInlineStyleBehaviorExample extends GrainUpdateInlineStyleBehavior(Polymer.Element) { // your code } ``` Insert your element with style and data-style ```html Create Element with style AND data-style ``` *For more information, see the API documentation.* ## Working on the Element First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. * View the Element via `polymer serve` * Run tests via `polymer test`
Online