接続されている属性と接続されていない属性

Question

ここで説明しているgoogleキャストボタンは、完全にプログラムで作成するようにしていますが、接続や切断の際にはカスタマイズ可能です。あなたは両方の状態の色を制御するには、次の属性を設定することができていることがわかります上記のドキュメントから

cast integration docs

。

--connected-color && --disconnected-color 

ボタンをプログラム的に作成されるように、私はキャストボタンの属性を作成するためにのsetAttributeまたは類似のものを使用する必要があります。しかし、最初の - 文字はのinvalidCharacterErrorを引き起こしています誰かがこれを見つけたのかしら？あなたのjsfiddleから

JSFiddle example

Answer 1

iは、APIを使用して、別のフィドルを作成し、--connected色& & --disconnected色はCSSの変数であることが明らかとなりました。 https://jsfiddle.net/karthick6891/up7ugfqd/10/

クロムキャストボタンのグローバルスタイルが必要です。

.chromecast-buttonxxxxx { 
    --connected-color: blue; 
    --disconnected-color: gray; 
} 

注：属性名を特殊文字で設定することはできません。あなたはCSSを介して行動を制御する必要があります。