关于polymer app无法再子页面内使用父页面引入的样式（更新中）

原創 罗星星的博客 2018-09-02 03:56

问题解决是瓜哥解决的，我帮忙写上博客

英文关键字：
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中（待更新————————————————————–）

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

关于Polymer的双向绑定的实现的探究

罗星星的博客 2020-06-01 04:04:22

关于Polymer的双向绑定的实现的探究（更新中）

罗星星的博客 2018-09-02 03:56:15

前端入门与深入学习必要了解的网站分享

罗星星的博客 2018-09-02 03:56:14