Getting started with Polymer 2 on Windows and the Shadow DOM
*update* The very first code lab during the summit explained this so much better than I! Check it out here!
I'm writing this super-excitedly on my way to Polymer Summit in Copenhagen! In order to get ready for tomorrow's teachings, I figured I'd get my machine ready to Polymer. Following the getting started guide at https://www.polymer-project.org/2.0/start/install-2-0 on a fairly fresh install, I ran into the following issues:
1. Bower wasn't installed
(npm install -g bower)
2. Git wasn't installed
(https://git-scm.com/download/win)
(I already had node.js installed)
After I'd installed git for Windows, I opted to just run the rest of the tutorial from the git bash. It worked a lot better! (I chose to overwrite the previously generated files when prompted, since it had failed).
Reading https://www.polymer-project.org/2.0/docs/devguide/shadow-dom, something that struck me that I hadn't realized earlier, was that you can style Polymer elements in a page, by utilizing inherited CSS properties. True, the whole point of the Shadow DOM is to isolate the elements' styling, so that you can guarantee a certain look. However, to let the elements also blend in to their host page, you can set up inherited defaults:
// See Inheritance on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
body {
font-family: Tahoma, Verdana, sans-serif;
color: navy;
}
Which ones are inherited and which ones are not? Unfortunately, you'll have to refer to the docs on that one: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Other than that, you have CSS variables and mixins:
// Outside your element
html {
--my-funky-element-background-color: orange;
--my-funky-element-mixin: {
color: white;
background-color: blue;
}
}
// Inside your element
:host {
background-color: var(--my-funky-element-background-color, /* or, default to ... */ blue);
// or ...
@apply --my-funky-element-mixin;
// ... to put the CSS declarations from the mixin in here
}
So we have both encapsulated elements AND blendability (it's a word, right?). Yay!
I'm writing this super-excitedly on my way to Polymer Summit in Copenhagen! In order to get ready for tomorrow's teachings, I figured I'd get my machine ready to Polymer. Following the getting started guide at https://www.polymer-project.org/2.0/start/install-2-0 on a fairly fresh install, I ran into the following issues:
1. Bower wasn't installed
(npm install -g bower)
2. Git wasn't installed
(https://git-scm.com/download/win)
(I already had node.js installed)
After I'd installed git for Windows, I opted to just run the rest of the tutorial from the git bash. It worked a lot better! (I chose to overwrite the previously generated files when prompted, since it had failed).
Reading https://www.polymer-project.org/2.0/docs/devguide/shadow-dom, something that struck me that I hadn't realized earlier, was that you can style Polymer elements in a page, by utilizing inherited CSS properties. True, the whole point of the Shadow DOM is to isolate the elements' styling, so that you can guarantee a certain look. However, to let the elements also blend in to their host page, you can set up inherited defaults:
// See Inheritance on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
body {
font-family: Tahoma, Verdana, sans-serif;
color: navy;
}
Which ones are inherited and which ones are not? Unfortunately, you'll have to refer to the docs on that one: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Other than that, you have CSS variables and mixins:
// Outside your element
html {
--my-funky-element-background-color: orange;
--my-funky-element-mixin: {
color: white;
background-color: blue;
}
}
// Inside your element
:host {
background-color: var(--my-funky-element-background-color, /* or, default to ... */ blue);
// or ...
@apply --my-funky-element-mixin;
// ... to put the CSS declarations from the mixin in here
}
So we have both encapsulated elements AND blendability (it's a word, right?). Yay!
Comments