A Polymer behavior to update CSS variables from custom element attributes.

[ This description is mirrored from README.md at github.com/arsnebula/nebula-style-attributes-behavior on 2019-05-22 ]

Published on webcomponents.org

Build Status

<nebula-style-attributes-behavior>

A Polymer behavior to update CSS variables from custom element attributes.

Installation

$ bower install -S arsnebula/nebula-style-attributes-behavior

Usage

Import the package behavior:

<link rel="import" href="/bower_components/nebula-style-attributes-behavior/nebula-style-attributes-behavior.html"> 

Add a styleAttributes or _styleAttributes property to the element to define how attributes are mapped to CSS variables. When the attribute is changed, the CSS variable will be updated.

<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: inline-block;
        color: var(--my-element-color, black);
        background-color: var(--my-element-background-color, silver);
      }
    </style>
    <slot></slot>
  </template>
  <script>
    Polymer({
      is: 'my-element',
      behaviors: [
        Nebula.StyleAttributesBehavior
      ],
      _styleAttributes: {
        'color': '--my-element-color',
        'background-color': '--my-element-background-color'
      }
    })
  </script>
</dom-module>

The element can now be styled using attributes.

<my-element color="white"></my-element>

For more information on element properties and methods see the element API documentation.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Change Log

See CHANGELOG

License

See LICENSE

Install

Link to this version
ImportedReleased 05 February 2017ISC License
Framework Support
Polymer 1.0+
Browser Independent
Install with
bower install --save arsnebula/nebula-style-attributes-behavior"#1.1.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.1.1

Dependencies

  • polymer#Polymer/polymer#^1.7.1