You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.9 KiB
71 lines
1.9 KiB
4 years ago
|
import listToStyles from './listToStyles'
|
||
|
|
|
||
|
|
export default function addStylesToShadowDOM (parentId, list, shadowRoot) {
|
||
|
|
var styles = listToStyles(parentId, list)
|
||
|
|
addStyles(styles, shadowRoot)
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
type StyleObject = {
|
||
|
|
id: number;
|
||
|
|
parts: Array<StyleObjectPart>
|
||
|
|
}
|
||
|
|
|
||
|
|
type StyleObjectPart = {
|
||
|
|
css: string;
|
||
|
|
media: string;
|
||
|
|
sourceMap: ?string
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
function addStyles (styles /* Array<StyleObject> */, shadowRoot) {
|
||
|
|
const injectedStyles =
|
||
|
|
shadowRoot._injectedStyles ||
|
||
|
|
(shadowRoot._injectedStyles = {})
|
||
|
|
for (var i = 0; i < styles.length; i++) {
|
||
|
|
var item = styles[i]
|
||
|
|
var style = injectedStyles[item.id]
|
||
|
|
if (!style) {
|
||
|
|
for (var j = 0; j < item.parts.length; j++) {
|
||
|
|
addStyle(item.parts[j], shadowRoot)
|
||
|
|
}
|
||
|
|
injectedStyles[item.id] = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function createStyleElement (shadowRoot) {
|
||
|
|
var styleElement = document.createElement('style')
|
||
|
|
styleElement.type = 'text/css'
|
||
|
|
shadowRoot.appendChild(styleElement)
|
||
|
|
return styleElement
|
||
|
|
}
|
||
|
|
|
||
|
|
function addStyle (obj /* StyleObjectPart */, shadowRoot) {
|
||
|
|
var styleElement = createStyleElement(shadowRoot)
|
||
|
|
var css = obj.css
|
||
|
|
var media = obj.media
|
||
|
|
var sourceMap = obj.sourceMap
|
||
|
|
|
||
|
|
if (media) {
|
||
|
|
styleElement.setAttribute('media', media)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (sourceMap) {
|
||
|
|
// https://developer.chrome.com/devtools/docs/javascript-debugging
|
||
|
|
// this makes source maps inside style tags work properly in Chrome
|
||
|
|
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
|
||
|
|
// http://stackoverflow.com/a/26603875
|
||
|
|
css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
|
||
|
|
}
|
||
|
|
|
||
|
|
if (styleElement.styleSheet) {
|
||
|
|
styleElement.styleSheet.cssText = css
|
||
|
|
} else {
|
||
|
|
while (styleElement.firstChild) {
|
||
|
|
styleElement.removeChild(styleElement.firstChild)
|
||
|
|
}
|
||
|
|
styleElement.appendChild(document.createTextNode(css))
|
||
|
|
}
|
||
|
|
}
|