问题解决是瓜哥解决的，我帮忙写上博客
英文关键字：
Custom parent element’s style not applied to child
问题：移动端使用polymer时
子页面无法使用父类页面的样式
但是在我们的web网站中是可以的，
有一个思路是用我们的web端的网站页面在手机端浏览看是否能成功使用样式，但是web端的页面在手机浏览器无法打开
问题原因听我们前端大佬说是WebComponents.js的引入的区别，
所以对比区别这一个尝试失败了。（内部原因待更新）
情况如下
在里面的html中，我们是无法使用elements.html里面包含的样式的
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="import" href="public/elements.html">
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="index">
<index-home></index-home>
</section>
</iron-pages>
<paper-toast id="toast">
<span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
</paper-toast>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
样式包含文件elements.html
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<link rel="stylesheet" type="text/css" href="css/margin.css">
<link rel="stylesheet" type="text/css" href="css/padding.css">
<link rel="stylesheet" type="text/css" href="css/list.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="../test.css">
对于这种情况：
目前我们希望的是import之后能够直接用我们import进来的css到全部页面中，但是目前是失败了
解决方式：
1、直接在每个css中引用其他公用的css。这样做达到了在每个页面import一个公用css的html的目的
缺点：听ui工程师说这样性能受影响，这个待考证------------------------------------
2、找办法解决import。样式集到html中（待更新--------------------------------------------------------------）
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
