CustomElements V1とShadowDOMのための外部スタイリング

Question

これは以前に尋ねられた質問がネイティブCustomElementsではなくPolymerをベースにしていたことと重複している質問のようですが、これはCSSに関するもので、ShadowDOMやCustom CSS Properties/

class StyleMe extends HTMLElement { 
 
\t constructor() { 
 
\t \t super(); 
 
\t \t let shadow = this.attachShadow({ mode: 'closed' }); 
 
\t \t shadow.appendChild(document.querySelector('#style-me').content.cloneNode(true)); 
 
\t } 
 
} 
 
customElements.define('style-me', StyleMe);

h1 { 
 
\t /* even !important doesn't penetrate */ 
 
\t color: red !important; 
 
}

<h1>I'm a normal heading</h1> 
 
<style-me>I'm heading hidden in style-me's shadow</style-me> 
 
<template id="style-me"> 
 
\t <style> 
 
\t \t :host { 
 
\t \t \t background: blue; 
 
\t \t \t display: block; 
 
\t \t } 
 
\t \t h1 { 
 
\t \t \t color: yellow; 
 
\t \t } 
 
\t </style> 
 
\t <h1><slot></slot></h1> 
 
</template>

：変数

は、そこでここでは、単純なカスタム要素を（新しいクロームのバージョンでは、この唯一の作品を書くように注意してください）持っています

これは、ShadowDOMの使用時にスタイルがどのように分離されるかを示しています。

<style>の内容を<template>の内部に保存して、外部ファイルに保存しておくといいかもしれません。おそらくlessなどのプリプロセッサによって生成されます。

Polymerに関する回答を見つけるために多くの検索を行った後、私は空白を描きました。

私は彼らが私が

<style> 
    :host { 
     background: blue; 
     display: block; 
    } 
    h1 { 
     color: var(--something); 
    } 
</style> 

を使用して、私の質問は

:host { 
    background: blue; 
    display: block; 
} 
h1 { 
    color: yellow; 
} 

を移動についてです

style-me { 
    --something: yellow; 
} 

を使用して色を設定することができるようになるカスタムプロパティを捜しているわけではない

---

<style>タグと別のファイル

Answer 1

CSS @import urlディレクティブを使用できます。

<template id="style-me"> 
    <style> 
     @import url('/css/style.css') 
    </script> 
    <h1><slot></slot></h1> 
</template> 

質問はdiscussed hereでした。