2. 程式人生 > >關於polymer app無法再子頁面內使用父頁面引入的樣式（更新中）

關於polymer app無法再子頁面內使用父頁面引入的樣式（更新中）

阿新 • • 發佈：2018-11-10

問題解決是瓜哥解決的，我幫忙寫上部落格

英文關鍵字：
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 app無法再子頁面內使用父頁面引入的樣式（更新中）

問題解決是瓜哥解決的，我幫忙寫上部落格 英文關鍵字： Custom parent element’s style not applied to child 問題：移動端使用polymer時 子頁面無法使用父類頁面的樣式 但是在我們的web網站中是可以的， 有一個思路是用我們

關於Polymer的雙向繫結的實現的探究（更新中）

探究polymer雙向繫結和單向繫結的實現 個人測試github：https://github.com/lufei222/PolymerElements 遇到的問題： 1、雙向繫結的探究從哪裡下手？直接原始碼中搜索[[]]和{{}}？ 2、基於原始版的polymer.h

css的再深入9（更新中···）

一 單位 1.px 就是一個基本的單位 畫素 2.em 也是一個單位 用父級元素的字型大小乘以em前面的數字。如果父級沒有就繼承上一個父級直到body，如果body沒有那就預設是16px。 3.rem 也是一個單位，只跟根節點<html>的字型大小有關，如果沒有預設是16px。 4.l

uni-app子頁面與父頁面互相傳值

開發十年，就只剩下這套架構體系了！ >>>   

子頁面返回父頁面的父頁面

ava mui text 功能 () 邏輯 子頁面 listen win 子頁面： <script type="text/javascript"> mui.init({ beforeback: function() { //獲得列表界面的web

轉 easyUI的iframe子頁面操作父頁面元素

itl 代碼 iframe yui com con 按鈕 頁面 tabs 曾經試過這樣的方法 在iframe子頁面獲取父頁面元素 代碼如下: $(‘#objId‘, parent.document); 這樣可以獲得父頁面的元素，但是

bootstrap3-iframe-modal子頁面在父頁面顯示模態框

rbo 相關 belle 綁定 dism label bsp 打開 win 本文靈感來自：http://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html 子頁面內容 //打開模態框 function openM

iframe子頁面與父頁面元素的訪問以及js變量的訪問

++ src 行修改 動態 class ria 方法 修改 左右 1、子頁面訪問父頁面元素 parent.document.getElementById(‘id‘)和document相關的方法都可以這樣用 2、父頁面訪問子頁面元素 document.

Vue子頁面給父頁面傳遞數據

mit info cli .info compute name component parent 子頁面 子頁面： <template> <div> <p>子組件</p> <button @click="sendMs

vue插槽，也就是子頁面、父頁面相互傳值的另一寫法

style def com data component rop 頁面 ret slot 父頁面: <template> <div class="parent"> <p>父組件</p> <child> &l

js之iframe子頁面與父頁面通信

瀏覽器 cti data pos href 事件 java win 兩種方法 iframe子頁面與父頁面通信根據iframe中src屬性是同域鏈接還是跨域鏈接，通信方式也不同。 一、同域下父子頁面的通信 父頁面parent.html <html> <h

CRM 2016 IFrame 子頁面執行 父頁面函式

CRM 中定義以下函式： windows.parent.functionname(){ //do somethion }  IFrame 子頁面呼叫 JS： windows.parent.functionname();   簡單 alert(); 

微信小程式從子頁面返回父頁面實現資料的區域性重新整理

問題描述 A頁面有一個儲存欄位的物件陣列items，從A頁面跳轉到B頁面，B頁面自定義欄位，並新增到items中。當返回A頁面時，顯示items的部分能夠區域性重新整理 items:[{name: '0', value: '姓名', checked: true, isNecessar

父頁面跳轉子頁面，子頁面返回父頁面並強制重新整理父頁面【記錄一下】

<input type="hidden" id="refreshed" value="no">（父頁面） 把下邊的程式碼加入js（父頁面呼叫） if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) { &nb

vue在父元件中給子元件內的結構設定樣式

父元件寫css時，樣式選擇器中加上 /deep/或者 >>> 這兩個標記就可以新增到到子元件結構的樣式中了。 舉例： 父元件 <div> <searchForm class="searchFormStyle"></sea

iframe子頁面獲取父頁面元素的方法

在iframe子頁面獲取父頁面元素   $.('#objld', parent.document); 在父頁面獲取iframe子頁面的元素   $("#objid",document.iframes('iframe').document)或$(document.g

angular子頁面呼叫父頁面方法

父頁面html <res-card open-video-play = "openVideoPlay(dataArr,resourceStr,playType)" ></res-card> --ps 注意： open-video-play 為子頁面

vue- cli子元件向父頁面執行操作

//開始了  在專案中經常會用到vue子元件向父頁面執行操作的情況，今天就寫一個選擇彈框元件對父頁面的一些操作方法 1.在子元件中新增事件 <ul> <li v-for="(item,index) in paydata" @click="payp

子頁面呼叫父頁面中的dom元素並回傳資訊

        當我們在多個頁面間做互動時免不了要進行頁面間的傳值問題,比如說下面就是這個的一個簡單的例子.         在這裡我們採用的是HTML DOM中的Browser 物件,該物件為我們提供了DOM Window物件,通過該物件下的open()方法,我們可以開

微信小程式從子頁面退回父頁面時的資料傳遞

小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。 我們知道，在微信小程式中，從一個頁面轉到另一個頁面，一般情況下可以通過navigate或redirect