`all：initial`で指定されたスタイルでWebコンポーネントをリセットする方法は？

Question

私は他のウェブサイトに埋め込まれることを目指すウィジェットを構築しています。私はall: initialを見ていたので、iframeを使わないでください。 "このキーワードは、要素allに設定されたすべてのプロパティ値が要素の親から設定されているか、要素の親から継承されていることを完全に示すように指定しますが、以前の規則の方がより特異性が高い場合、ここ

は、問題の例です。この時点で

/* external css */ 
 
#color { 
 
    color: red; 
 
} 
 

 
span { 
 
    text-decoration: underline; 
 
} 
 

 
span { 
 
    font-weight: bold !important; 
 
} 
 

 
/* my widget css */ 
 
/* reset */ 
 

 
widget, 
 
widget * { 
 
    all: initial; 
 
} 
 

 
/* then my widget style */ 
 
widget span { 
 
    color: blue 
 
}

<div id="div"> 
 
    Lorem <span id="color">ipsum</span> dolor sit amet, 
 
    <widget>consectetur <span id="color">adipiscing</span> elit.</widget> 
 
    Phasellus eget velit sagittis. 
 
</div>

ウィジェット内の唯一のスタイルは、テキスト装飾として持っている青で印刷された言葉「adipiscing」でなければなりませんそれはまだ赤で太字です

私はそれがちょっとした仕事のIDで接頭辞を試しましたが、!importantのルールでは試しませんでした。また、ウィジェットルールの一部またはそれぞれに!importantを追加しようとしましたが、状況が最悪になります。

外部CSSに触れることなくこの作業を行う方法はありますか？

Answer 1

あなたの要素をより重要なものとペアにしてください。