Skip to content

Instantly share code, notes, and snippets.

@daKmoR
Created March 15, 2017 14:05
Show Gist options
  • Save daKmoR/61d70088fb6389fc047df4ba40cbf480 to your computer and use it in GitHub Desktop.
Save daKmoR/61d70088fb6389fc047df4ba40cbf480 to your computer and use it in GitHub Desktop.
IE Edge will ignore inline style variables in webcomponents
<!--
IE Edge will ignore inline style variables in webcomponents
e.g. style="--my-color: #ccc" will not overwrite any default value for --my-color.
for an example open this in IE Edge
http://plnkr.co/edit/cSIs0ODeyUsaXiemxhyP?p=preview
If you extend an element from this element instead e.g.
class ImageBlock extends BaseElement {
}
inline style variables be properly set even in IE Edge.
-->
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<script>
class BaseElement extends Polymer.Element {
vhToPx(vh) {
if (vh.indexOf('vh') > 0) {
return document.documentElement.clientHeight * (parseInt(vh)/100) + '';
}
return vh;
}
ready() {
super.ready();
this.updateStyles({});
}
updateStyles(styles) {
if (styles === undefined) {
return;
}
let newStyle = styles;
let currentStyleString = this.getAttribute('style');
if (currentStyleString !== undefined && currentStyleString !== null && currentStyleString !== '') {
newStyle = {};
let currentStylesPairs = currentStyleString.split(';');
for (let currentStylePairKey in currentStylesPairs) {
if (currentStylesPairs.hasOwnProperty(currentStylePairKey)) {
let currentStylePairString = currentStylesPairs[currentStylePairKey];
if (currentStylePairString !== '') {
let currentStylePair = currentStylePairString.split(':');
if (currentStylePair.length === 2) {
newStyle[currentStylePair[0]] = currentStylePair[1];
}
}
}
}
for (var newStylePairKey in styles) {
if (styles.hasOwnProperty(newStylePairKey)) {
newStyle[newStylePairKey] = styles[newStylePairKey];
}
}
}
if (window.ShadyCSS && window.ShadyCSS.nativeCss === false) {
super.updateStyles(newStyle);
} else {
var newStyleString = '';
for (var key in newStyle) {
if (newStyle.hasOwnProperty(key)) {
newStyleString += key + ': ' + newStyle[key] + ';';
}
}
this.style = newStyleString;
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment