Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings 2.0 Preview About Polymer 2.0 Upgrade guide App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop Elements News Feature overview Quick tour
Define elements
Register an element Declare properties Instance methods Behaviors
Local DOM & styling
Local DOM Styling
Events
Handle and fire events Gesture events
Data system
Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements
Tools
Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services
What's new
Release notes 1.0 Migration guide About Polymer 1.0
Resources
Community Browser compatibility
API Reference
Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings
{"type":"element","desc":"\n\nThe `custom-style` extension of the native `<style>` element allows defining styles\nin the main document that can take advantage of several special features of\nPolymer's styling system:\n\nDocument styles defined in a `custom-style` will be shimmed to ensure they do\nnot leak into local DOM when running on browsers without non-native Shadow DOM.\nShadow DOM-specific `/deep/` and `::shadow` combinators will be shimmed on\nbrowsers without non-native Shadow DOM.\nCustom properties used by Polymer's shim for cross-scope styling\nmay be defined in an `custom-style`.\nAn `include` attribute may be specified to pull in style data from a\n`dom-module` matching the include attribute. By using `include`, style data\ncan be shared between multiple `custom-style` elements.\n\nExample:\n\n```html\n<!doctype html>\n<html>\n<head>\n <script src=\"components/webcomponentsjs/webcomponents-lite.js\"></script>\n <link rel=\"import\" href=\"components/polymer/polymer.html\">\n\n <style is=\"custom-style\">\n\n /* Will be prevented from affecting local DOM of Polymer elements */\n{\n box-sizing: border-box;\n }\n\n /* Can use /deep/ and ::shadow combinators */\n body /deep/ .my-special-view::shadow #thing-inside {\n background: yellow;\n }\n\n /* Custom properties that inherit down the document tree may be defined */\n body {\n --my-toolbar-title-color: green;\n }\n\n </style>\n \n \n <dom-module id=\"shared-style\">\n <template>\n <style>\n :root {\n --shared-background-color: #bada55;\n }\n </style>\n </template>\n </dom-module>\n \n <style is=\"custom-style\" include=\"shared-style\">\n \n body {\n background-color: var(--shared-background-color);\n }\n \n </style>\n</head>\n<body>\n\n ...\n\n</body>\n</html>\n```\n\nNote, all features of `custom-style` are available when defining styles as part of Polymer elements (e.g. `<style>` elements within `<dom-module>`'s used for defining Polymer elements. The `custom-style` extension should only be used for defining document styles, outside of a custom element's local DOM.\n\n","events":[],"properties":[{"name":"include","type":"string","desc":"\nSpecify `include` to identify a `dom-module` containing style data which\nshould be used within the `custom-style`. By using `include` style data\nmay be shared between multiple different `custom-style` elements.\n\nTo include multiple `dom-modules`, use `include=\"module1 module2\"`.\n ","published":true,"jsdoc":{"description":"\nSpecify `include` to identify a `dom-module` containing style data which\nshould be used within the `custom-style`. By using `include` style data\nmay be shared between multiple different `custom-style` elements.\n\nTo include multiple `dom-modules`, use `include=\"module1 module2\"`.\n ","tags":[],"orig":"*\n * Specify `include` to identify a `dom-module` containing style data which\n * should be used within the `custom-style`. By using `include` style data\n * may be shared between multiple different `custom-style` elements.\n *\n * To include multiple `dom-modules`, use `include=\"module1 module2\"`.\n "}},{"name":"_apply","type":"Function","desc":" apply custom properties!","params":[{"name":"deferProperties"}],"jsdoc":{"description":" apply custom properties!","tags":[],"orig":" apply custom properties!"},"private":true,"function":true},{"name":"_applyCustomProperties","type":"Function","params":[{"name":"element"}],"private":true,"function":true},{"name":"_template","type":"object","private":true},{"name":"_tryApply","type":"Function","params":[],"private":true,"function":true},{"name":"attached","type":"Function","params":[],"private":true,"configuration":true,"function":true},{"name":"extends","type":"string","private":true,"configuration":true},{"name":"ready","type":"Function","params":[],"private":true,"configuration":true,"function":true}],"behaviors":[],"observers":[],"is":"custom-style","contentHref":"temp/src/lib/custom-style.html","jsdoc":{"description":"\n\nThe `custom-style` extension of the native `<style>` element allows defining styles\nin the main document that can take advantage of several special features of\nPolymer's styling system:\n\nDocument styles defined in a `custom-style` will be shimmed to ensure they do\nnot leak into local DOM when running on browsers without non-native Shadow DOM.\nShadow DOM-specific `/deep/` and `::shadow` combinators will be shimmed on\nbrowsers without non-native Shadow DOM.\nCustom properties used by Polymer's shim for cross-scope styling\nmay be defined in an `custom-style`.\nAn `include` attribute may be specified to pull in style data from a\n`dom-module` matching the include attribute. By using `include`, style data\ncan be shared between multiple `custom-style` elements.\n\nExample:\n\n```html\n<!doctype html>\n<html>\n<head>\n <script src=\"components/webcomponentsjs/webcomponents-lite.js\"></script>\n <link rel=\"import\" href=\"components/polymer/polymer.html\">\n\n <style is=\"custom-style\">\n\n /* Will be prevented from affecting local DOM of Polymer elements */\n{\n box-sizing: border-box;\n }\n\n /* Can use /deep/ and ::shadow combinators */\n body /deep/ .my-special-view::shadow #thing-inside {\n background: yellow;\n }\n\n /* Custom properties that inherit down the document tree may be defined */\n body {\n --my-toolbar-title-color: green;\n }\n\n </style>\n \n \n <dom-module id=\"shared-style\">\n <template>\n <style>\n :root {\n --shared-background-color: #bada55;\n }\n </style>\n </template>\n </dom-module>\n \n <style is=\"custom-style\" include=\"shared-style\">\n \n body {\n background-color: var(--shared-background-color);\n }\n \n </style>\n</head>\n<body>\n\n ...\n\n</body>\n</html>\n```\n\nNote, all features of `custom-style` are available when defining styles as part of Polymer elements (e.g. `<style>` elements within `<dom-module>`'s used for defining Polymer elements. The `custom-style` extension should only be used for defining document styles, outside of a custom element's local DOM.\n\n","tags":[],"orig":"\n\nThe `custom-style` extension of the native `<style>` element allows defining styles\nin the main document that can take advantage of several special features of\nPolymer's styling system:\n\n* Document styles defined in a `custom-style` will be shimmed to ensure they do\nnot leak into local DOM when running on browsers without non-native Shadow DOM.\n* Shadow DOM-specific `/deep/` and `::shadow` combinators will be shimmed on\nbrowsers without non-native Shadow DOM.\n* Custom properties used by Polymer's shim for cross-scope styling\nmay be defined in an `custom-style`.\n* An `include` attribute may be specified to pull in style data from a\n`dom-module` matching the include attribute. By using `include`, style data\ncan be shared between multiple `custom-style` elements.\n\nExample:\n\n```html\n<!doctype html>\n<html>\n<head>\n <script src=\"components/webcomponentsjs/webcomponents-lite.js\"></script>\n <link rel=\"import\" href=\"components/polymer/polymer.html\">\n\n <style is=\"custom-style\">\n\n /* Will be prevented from affecting local DOM of Polymer elements */\n * {\n box-sizing: border-box;\n }\n\n /* Can use /deep/ and ::shadow combinators */\n body /deep/ .my-special-view::shadow #thing-inside {\n background: yellow;\n }\n\n /* Custom properties that inherit down the document tree may be defined */\n body {\n --my-toolbar-title-color: green;\n }\n\n </style>\n \n \n <dom-module id=\"shared-style\">\n <template>\n <style>\n :root {\n --shared-background-color: #bada55;\n }\n </style>\n </template>\n </dom-module>\n \n <style is=\"custom-style\" include=\"shared-style\">\n \n body {\n background-color: var(--shared-background-color);\n }\n \n </style>\n</head>\n<body>\n\n ...\n\n</body>\n</html>\n```\n\nNote, all features of `custom-style` are available when defining styles as part of Polymer elements (e.g. `<style>` elements within `<dom-module>`'s used for defining Polymer elements. The `custom-style` extension should only be used for defining document styles, outside of a custom element's local DOM.\n\n"},"demos":[]}