Skip to content

Commit

Permalink
Update custom-style API doc
Browse files Browse the repository at this point in the history
Fixes Polymer/old-docs-site#2266.

I didn't test this through the docs generation. Handle with care.
  • Loading branch information
Arthur Evans authored Jul 24, 2017
1 parent 5b87aba commit 52a7328
Showing 1 changed file with 32 additions and 6 deletions.
38 changes: 32 additions & 6 deletions lib/elements/custom-style.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,43 @@

/**
* Custom element for defining styles in the main document that can take
* advantage of several special features of Polymer's styling system:
* advantage of [shady DOM](https://github.com/webcomponents/shadycss) shims
* for style encapsulation, custom properties, and custom mixins.
*
* - Document styles defined in a custom-style are shimmed to ensure they
* do not leak into local DOM when running on browsers without native
* Shadow DOM.
* - Custom properties used by Polymer's shim for cross-scope styling may
* be defined in an custom-style. Use the :root selector to define custom
* properties that apply to all custom elements.
* - Custom properties can be defined in an custom-style. Use the `html` selector
* to define custom properties that apply to all custom elements.
* - Custom mixins can be defined in a custom-style, if you import the optional
* [apply shim](https://github.com/webcomponents/shadycss#about-applyshim)(`shadycss/apply-shim.html`).
*
* To use, simply wrap an inline `<style>` tag in the main document whose
* CSS uses these features with a `<custom-style>` element.
* To use:
*
* - Import the custom-style element.
* - Place a `<custom-style>` element in the main document, wrapping an inline `<style>` tag that
* contains the CSS rules you want to shim.
*
* For example:
*
* ```
* <!-- import apply shim--only required if using mixins -->
* <link rel="import href="bower_components/shadycss/apply-shim.html">
* <!-- import custom-style element -->
* <link rel="import" href="bower_components/polymer/lib/elements/custom-style.html">
* ...
* <custom-style>
* <style>
* html {
* --custom-color: blue;
* --custom-mixin: {
* font-weight: bold;
* color: red;
* };
* }
* </style>
* </custom-style>
* ```
*
* @customElement
* @extends HTMLElement
Expand Down

0 comments on commit 52a7328

Please sign in to comment.