115 lines
4.0 KiB
HTML
115 lines
4.0 KiB
HTML
<!--
|
|
@license
|
|
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<link rel="import" href="../../../shadycss/custom-style-interface.html">
|
|
<link rel="import" href="../utils/style-gather.html">
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
const attr = 'include';
|
|
|
|
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
|
|
|
|
/**
|
|
* Custom element for defining styles in the main document that can take
|
|
* 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 can be defined in a `<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:
|
|
*
|
|
* - Import `custom-style.html`.
|
|
* - 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:
|
|
*
|
|
* ```html
|
|
* <!-- 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
|
|
* @memberof Polymer
|
|
* @summary Custom element for defining styles in the main document that can
|
|
* take advantage of Polymer's style scoping and custom properties shims.
|
|
*/
|
|
class CustomStyle extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this._style = null;
|
|
CustomStyleInterface.addCustomStyle(this);
|
|
}
|
|
/**
|
|
* Returns the light-DOM `<style>` child this element wraps. Upon first
|
|
* call any style modules referenced via the `include` attribute will be
|
|
* concatenated to this element's `<style>`.
|
|
*
|
|
* @return {HTMLStyleElement} This element's light-DOM `<style>`
|
|
*/
|
|
getStyle() {
|
|
if (this._style) {
|
|
return this._style;
|
|
}
|
|
const style = /** @type {HTMLStyleElement} */(this.querySelector('style'));
|
|
if (!style) {
|
|
return null;
|
|
}
|
|
this._style = style;
|
|
const include = style.getAttribute(attr);
|
|
if (include) {
|
|
style.removeAttribute(attr);
|
|
style.textContent = Polymer.StyleGather.cssFromModules(include) + style.textContent;
|
|
}
|
|
/*
|
|
HTML Imports styling the main document are deprecated in Chrome
|
|
https://crbug.com/523952
|
|
|
|
If this element is not in the main document, then it must be in an HTML Import document.
|
|
In that case, move the custom style to the main document.
|
|
|
|
The ordering of `<custom-style>` should stay the same as when loaded by HTML Imports, but there may be odd
|
|
cases of ordering w.r.t the main document styles.
|
|
*/
|
|
if (this.ownerDocument !== window.document) {
|
|
window.document.head.appendChild(this);
|
|
}
|
|
return this._style;
|
|
}
|
|
}
|
|
|
|
window.customElements.define('custom-style', CustomStyle);
|
|
Polymer.CustomStyle = CustomStyle;
|
|
})();
|
|
</script>
|