0

以下はポリマー要素のサンプルです。

<dom-module id="custom-dialog">
  <style>
      #text{
        width: 400px;
        height: 50px;
        position: relative;
        background: #fff;  
      }
     p{
       position: absolute;
       margin: var(--ui-connectionDialog-text-margin, 5% 30%); 
       font-size: var(--ui-connectionDialog-text-font-size, 18px);
      }
  </style>

  <template>
     <!-- local DOM for your element -->
    <div id = "text" > <p><content></content></p> </div>

 </template>
</dom-module>

カスタムcssを使用してスタイル設定されている例

<style>
   custom-dialog.connecting
   {
      --custom-dialog-text-font-size: 23px;
      --custom-dialog-text-margin: 3.8% 30%;
   }

   custom-dialog.disconnected
   {
        --custom-dialog-text-font-size: 20px;
        --custom-dialog-text-margin: 3.8% 30%;
   }       
</style>
<body>
  <custom-dialog class="connecting">Connecting</custom-dialog>
</body>

class プロパティでカスタム css プロパティを適用できましたが、connectingjs を使用してカスタム要素のクラスを に変更するdisconnectedと、新しい css プロパティが適用されません。実際、class プロパティが に戻されるconnectingと、それぞれの css プロパティも適用されません。

これは、ブラウザが shady-dom モードで実行されていて、ポリゴンの塗りつぶしにギャップがあることが原因であると思われます。

css プロパティを shady-dom の要素に直接適用したく<p>なるのですが、この問題を処理する適切な方法があるかどうか知りたいです。

4

1 に答える 1