Polymer 2の子要素にwindow.documentスタイルを適用する

Question

私は、ユーザーがドラッグアンドドロップでWebページを構築できるアプリを開発中です。ユーザーが削除できる要素の一部は、Polymer2要素です。

ユーザはカスタムスタイルシートをページに追加することもできます。そうした場合、そこに定義されているスタイルはPolymer2エレメントの子に影響します。

このようなことがWebコンポーネントの動作の仕方に反するのかどうかはわかりますが、可能かどうかまだ疑問です。

私はポリマーには非常に慣れていて、どの方向に向いているのかよくわかりません。ミックスイン、共有スタイル、カスタムスタイルについて読んだことがありますが、私のユースケースには有効なアプローチを提供していないようです。

ご協力いただきありがとうございます。

/parent-styles.html

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<dom-module id="parent-styles"> 
    <link rel="import" type="css" href="ref_to_page_stylesheet.min.css"> 
</dom-module> 

私はこれをインポートすることができます：importは、将来的には廃止されますので、これまでのところ、私は理想的な作業ではなく、することが一つの解決策を発見した

EDIT

ファイルは<style include="parent-styles"></style>です。これは、少なくともポリマー要素がページのスタイルシートからスタイルされることを可能にしますが、スタイルシートの名前や位置が変更されるとすぐにこの解決策が破られることは明らかです。

Answer 1

Webコンポーネントのスタイリングには多くのオプションがあります。 がシャドウDOMを使用するコンポーネントは、メインページでスタイルを設定したり、独自のスタイル（ ）を定義したり、ユーザーに のデフォルトを上書きするフック（CSSカスタムプロパティの形式）を提供することができます。

外からコンポーネント<fancy-tabs>をスタイルに、あなただけのセレクタとしてそのタグ名を使用することができます。

fancy-tabs { 
    width: 350px; 
} 

外のスタイルは常にシャドウDOMで定義されたスタイルに勝ちます。しかし、これは今までにあなたを得るだけです。 <fancy-tabs>の内部をスタイルする場合はどうなりますか？ここでカスタムCSSプロパティを使用してスタイルフックを作成する必要があります。

例：<fancy-tabs>のシャドウDOM内部

<!-- main page --> 
<style> 
    fancy-tabs { 
    margin-bottom: 32px; 
    --fancy-tabs-bg: black; 
    } 
</style> 
<fancy-tabs background>...</fancy-tabs> 

：ユーザがそれを提供するので、この場合

:host([background]) { 
    background: var(--fancy-tabs-bg, #9E9E9E); 
    border-radius: 10px; 
    padding: 10px; 
} 

、コンポーネントは、バックグラウンド値として黒使用します。それ以外の場合は、デフォルトで#9E9E9Eになります。使用

参考：Shadow DOM v1: Self-Contained Web Components

Answer 2

私は自分自身によって溶液のいくつかの並べ替えを働きました。すでに質問したように、Webコンポーネントのカプセル化の哲学に反しています。また、今後非難されるリンクタグにも依存しています。最悪の場合、まだクロスブラウザのテストは行っていません...したがって：

注意して使用してください！

あなたは（それをインポートした後で）このように下のスタイルモジュールを使用することができます。

<style include="bb-shared-styles"></style>

<dom-module id="bb-shared-styles"> 
 
    <template id="style-template"> 
 
    <style id="stylesheet"></style> 
 
    </template> 
 

 
    <script> 
 
    ((document) => { 
 
     const doc  = (document._currentScript || document.currentScript).ownerDocument; 
 
     const domModule = doc.querySelector('#bb-shared-styles'); 
 
     const template = doc.querySelector('#style-template'); 
 
     const pageStyles = document.styleSheets; 
 
     const styles  = template.content.querySelector('#stylesheet'); 
 
     styles.type  = 'text/css'; 
 

 
     
 
     processStyleSheets(); 
 

 
     function processStyleSheets() { 
 
     for (let index = 0; index < document.styleSheets.length; index++) { 
 
      const sheet = document.styleSheets[index]; 
 
      if (sheet.href) { 
 
      // Prefer adding links to parsing CSS rules for better performance 
 
      appendLink(sheet.href); 
 
      } else { 
 
      const rules = sheet.rules || sheet.cssRules; 
 
      if (rules) { 
 
       // For inline styles 
 
       appendRules(rules); 
 
      } 
 
      } 
 
     } 
 
     } 
 

 
     function appendRules (rules) { 
 
     const len = rules.length; 
 
     for (let index = 0; index < len; index++) { 
 
      const rule = rules[index]; 
 
      styles.appendChild(document.createTextNode(rule.cssText)); 
 
     } 
 
     } 
 

 
     function appendLink (href) { 
 
     let link = document.createElement('link'); 
 
     link.rel = 'import'; 
 
     link.type = 'css'; 
 
     link.href = href; 
 
     domModule.insertBefore(link, domModule.firstChild); 
 
     } 
 

 
    })(document); 
 
    </script> 
 
</dom-module>