覆盖 Polymer 的纸张输入 BiDi 行为

Question

我正在尝试在复杂的 BiDi 应用程序中使用 paper-input 元素，我需要输入框在不同的设置中具有特定的不同 unicode-bidi CSS 设置。

我试图在包含 paper-input 元素的组件中使用 CSS 规则，但它对 paper-input shadow-DOMed INPUT 元素 - 我的所有规则都在我的元素范围内使用 CSS class 以我的元素命名（或者至少那是 Chrome 的开发工具显示的），同时顶级 paper-input 元素带有 class 并且可以让我的样式影响它，内部 INPUT 元素不是 - 我无法编写规则来改变它的行为。

是否有官方方法可以实现我想要实现的目标，或者我是否必须从头开始重新创建自己的 paper-input 以支持此用例？

Answer 1

<paper-input> 包含一个 <paper-input-container>，它支持一个 CSS mixin (--paper-input-container-input) 来设置内部 <input>.

的样式

您可以像这样设置 <input> 的 unicode-bidi：

// dom-module
<template>
  <style>
    paper-input {
      --paper-input-container-input: {
        unicode-bidi: isolate;
      };
    }
  </style>

  <paper-input label="Name"></paper-input>
</template>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-input {
          --paper-input-container-input: {
            background: rgba(0,0,255,0.3);
            unicode-bidi: isolate;
          };
        }
      </style>

      <paper-input label="Name"></paper-input>
    </template>
  </dom-module>
</body>

codepen

覆盖 Polymer 的纸张输入 BiDi 行为

Overriding Polymer's paper-input BiDi behavior

css

shadow-dom

polymer