聚合物纸张输入不起作用或渲染

Polymer Paper-Input not working or rendering

本文关键字：不起作用输入张输入聚合物更新时间：2023-09-26

我正在尝试在我的页面中使用纸质输入元素，但它似乎不起作用。然后，我尝试在Polymer站点上运行演示的代码，但这也没有用，我得到了简单的文本字段，而不是Polymer的纸张输入元素。我正在使用与示例完全相同的代码，即

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <title>paper-input</title>
  <script src="..components/webcomponentsjs/webcomponents.js"></script>
  <link href="..components/paper-input/paper-autogrow-textarea.html" rel="import">
  <link href="..components/paper-input/paper-input-decorator.html" rel="import">
  <link href="..components/paper-input/paper-input.html" rel="import">
  <style shim-shadowdom>
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      font-size: 14px;
      margin: 0;
      padding: 24px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-touch-callout: none;
    }
    section {
      padding: 20px 0;
    }
    section > div {
      padding: 14px;
      font-size: 16px;
    }
    paper-input {
      width: 80%;
    }
    paper-input-decorator {
      max-width: 80%;
    }
    @media only screen and (min-width : 320px) {
      paper-input {
        width: 100%;
      }
      paper-input-decorator {
        max-width: 100%;
      }
    }
    paper-input.narrow {
      width: 150px;
    }
    .custom /deep/ ::-webkit-input-placeholder {
      color: #f4b400;
    }
    .custom /deep/ ::-moz-placeholder {
      color: #f4b400;
    }
    .custom /deep/ :-ms-input-placeholder {
      color: #f4b400;
    }
    .custom /deep/ .label-text,
    .custom /deep/ .error {
      color: #f4b400;
    }
    .custom /deep/ .unfocused-underline {
      background-color: #f4b400;
    }
    .custom[focused] /deep/ .floated-label .label-text {
      color: #0f9d58;
    }
    .custom /deep/ .focused-underline {
      background-color: #0f9d58;
    }
    .custom.invalid /deep/ .floated-label .label-text,
    .custom /deep/ .error {
      color: #f06292;
    }
    .custom.invalid /deep/ .focused-underline {
      background-color: #f06292;
    }
    .custom {
      color: #1a237e;
    }
  </style>
</head>
<body unresolved>
  <section>
    <div>Standalone</div>
    <br>
    <paper-input label="label"></paper-input>
    <br>
    <paper-input label="floating label" floatingLabel></paper-input>
    <br>
    <paper-input label="disabled" disabled></paper-input>
  </section>
  <section>
    <div>Decorator</div>
    <br>
    <paper-input-decorator label="with core-input">
      <input is="core-input">
    </paper-input-decorator>
    <br>
    <paper-input-decorator label="with core-input + floatingLabel" floatingLabel>
      <input is="core-input">
    </paper-input-decorator>
    <br>
    <paper-input-decorator label="with autogrowing text area">
      <paper-autogrow-textarea>
        <textarea></textarea>
      </paper-autogrow-textarea>
    </paper-input-decorator>
    <br>
    <paper-input-decorator label="with autogrowing text area + floatingLabel" floatingLabel>
      <paper-autogrow-textarea>
        <textarea></textarea>
      </paper-autogrow-textarea>
    </paper-input-decorator>
  </section>
  <section>
    <div>Auto-Validation</div>
    <paper-input-decorator label="required" floatingLabel error="input is required!" autoValidate>
      <input is="core-input" required>
    </paper-input-decorator>
  </section>
  <section>
    <div>Custom styling</div>
    <br>
    <paper-input class="custom" label="paper-input"></paper-input>
    <br>
    <paper-input-decorator class="custom" label="decorator">
      <input is="core-input">
    </paper-input-decorator>
  </section>
  <script>
    document.body.addEventListener('change', function(e) {
      console.log('change', e.target);
    });
  </script>
</body>
</html>

在这种情况下，

我似乎一直在为 CORE-INPUT 获得 404（未找到元素异常），这似乎有点奇怪。但显然，您需要先导入核心输入，然后才能使用纸质输入，这就是我使其工作的方式。