-
Notifications
You must be signed in to change notification settings - Fork 2k
/
custom-style.js
110 lines (103 loc) · 3.8 KB
/
custom-style.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/**
@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
*/
import '@webcomponents/shadycss/entrypoints/custom-style-interface.js';
import { cssFromModules } from '../utils/style-gather.js';
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
* @summary Custom element for defining styles in the main document that can
* take advantage of Polymer's style scoping and custom properties shims.
*/
export 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>`.
*
* @export
* @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);
/** @suppress {deprecated} */
style.textContent = 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);