Question

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

我尝试在包含paper-input元素的组件中使用CSS规则，但它对paper-input shadow-DOMed INPUT元素没有任何影响 - 我的所有规则都使用以我的元素命名的CSS类（或者至少是Chrome的开发工具显示的那个）来限定我的元素，并且顶层paper-input元素携带那个类可以让我的样式影响它，内部INPUT元素不是 - 我不能写规则来改变它的行为。

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

Answer 1

<paper-input>包含<paper-input-container>，它支持内部--paper-input-container-input样式的CSS mixin（<input>）。

您可以像这样设置<input>＆＃39; unicode-bidi：

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

codepen

覆盖Polymer的纸张输入BiDi行为

1 个答案: