Unable to get Polymer 2 iron-flex-layout to work
Question
Banging my head against the wall here. Barebones Polymer 2.0 project, able to create my custom components, I can't get iron-flex-layout or iron-flex-layout-classes to work. Installed Polymer CLI, and installed Polymer using bower.
Directory structure:
/bower_components
polymer, webcomponentsjs, iron-flex-layout, shadycss
index.html
Inside index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html"/>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style is="custom-style">
.mixed-in-vertical-layout {
@apply(--layout-vertical);
}
</style>
</head>
<body>
<div class="horizontal layout">
<div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div>
</div>
<div class="mixed-in-vertical-layout">
<div>Vertical</div> <div>A</div> <div>B</div> <div>C</div>
</div>
</body>
</html>
I run polymer build , and upload the build/default directory to my server. Refreshing the page, I expect to see "Horizontal ABC" to use .horizontal.layout style provided by iron-flex-layout-classes.html , and "Vertical ABC" to use @apply rule from style inside head element of the page.
Neither of those things are happening. I believe I followed the guide to the T and it doesn't work. Here's what I see in the inspector when I inspect the first element:
And here's second:
As you can see, in the CSS area of the inspector, "inherited from html" chunk is displaying all the mix-ins. I'm pretty sure it's not supposed to show up in there like that. And here's close up:
Lines that contain @apply in CSS var definitions are crossed out. I'm totally confused. Is my installation of Polymer messed up somehow? I get no errors, however, and my custom elements appear to work (except for the iron-flex stuff, classes or @apply).
I tried using paper components, which also work, but appear un-styled.
Any clues?
Thanks in advance.
2 answers
solution1
3 2017-10-04 20:48:44
I'm thinking you can't get to the styles in iron-flex-layout-classes.html because they are masked by the Shadow DOM. You should use the CSS variables to get to them. Also, you must wrap your <style> in <custom-style> . Try this code:
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html"/>
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
<custom-style>
<style is="custom-style">
.mixed-in-vertical-layout {
@apply --layout-vertical;
}
.horizontal-layout {
@apply --layout-horizontal;
}
</style>
</custom-style>
</head>
<body>
<div class="horizontal-layout">
<div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div>
</div>
<div class="mixed-in-vertical-layout">
<div>Vertical</div> <div>A</div> <div>B</div> <div>C</div>
</div>
</body>
</html>
solution2
3 ACCPTED 2017-10-05 01:19:06
You just need to wrap your <style> element with <custom-element> .
<html lang="en"> <head> <meta charset="UTF-8"> <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script> <link rel="import" href="https://polygit.org/components/polymer/polymer.html" /> <link rel="import" href="https://polygit.org/components/iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="https://polygit.org/components/iron-flex-layout/iron-flex-layout-classes.html"> <custom-style> <style include="iron-flex iron-flex-alignment"></style> </custom-style> <custom-style> <style> .mixed-in-vertical-layout { @apply --layout-vertical; } </style> </custom-style> </head> <body> <div class="horizontal layout"> <div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div> </div> <div class="mixed-in-vertical-layout"> <div>Vertical</div> <div>A</div> <div>B</div> <div>C</div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.