1

大家好，

我尝试使用聚合物为 <option> 元素创建本机元素扩展。这个想法是，为选项制作更复杂的描述性文本，为可用性设计样式。

可用性问题：

这不是什么大事，而是我正在研究可用性的一个项目（服务端渲染）。特别是视觉更新。所以我找到了一些项目的选择，这些项目的选项显示它们的信息未对齐且不易阅读。

<option value="1">Magnesium 43,005344632 kg</option>
<option value="2">Magnesium 0,001234556 kg</option>
<option value="3">Magnesium 1037,012443111 kg</option>

实际项目有时会显示超过 10 个具有不同中间十进制数字的此类选项。

我的想法：

在 <iron-component-page> 的帮助下，我使用聚合物 cli 准备好的项目设置来开发我的实验组件，该项目旨在构建独立的 web 组件（因此结果在 < iframe > 内呈现）。

<link rel="import" href="bower_components/polymer/polymer.html">

<!--
`special-option` is an extension for option elements.
Example:

    <select name="options">
      <option is="special-option" value="1">option 1</option>
      <option is="special-option" value="2">option 2</option>
      <option is="special-option" value="3">option 3</option>
    </select>


### Styling

Custom property | Description | Default
----------------|-------------|----------
`--special-option` | Mixin applied to special-option | `{}`
`--special-option-container` | Mixin applied to the container of values | `{}`
`--special-option-value-a` | Mixin applied to the first value | `{}`
`--special-option-value-b` | Mixin applied to the second value | `{}`
`--special-option-value-c` | Mixin applied to the third value | `{}`


@demo demo/index.html
-->
<dom-module id="special-option">
    <template>
    <style is="custom-style">
      :host {
        @apply(--special-option);
      }

      #container {
        @apply(--special-option-container);
      }

      span {
        @apply(--special-option-values);
      }

      .value-a {
        @apply(--special-option-value-a);
      }

      .value-b {
        @apply(--special-option-value-b);
      }

      .value-c {
        @apply(--special-option-value-c);
      }
    </style>

    <div id="container">
      <span class="value-a"> [[valueA]] </span>
      <span class="value-b"> [[valueB]] </span>
      <span class="value-c"> [[valueC]] </span>
    </div>

  </template>

    <script>
        window.addEventListener('WebComponentsReady', function(e) {
            // imports are loaded and elements have been registered
            console.log('Components are ready');
            Polymer({
                is: 'special-option',

                extends: 'option',

                properties: {
                    /**
                     * First value to be shown.
                     * @type {String}
                     */
                    valueA: {
                        type: String,
                        reflectToAttribute: true
                    },
                    /**
                     * Second value to be shown.
                     * @type {String}
                     */
                    valueB: {
                        type: String,
                        reflectToAttribute: true
                    },
                    /**
                     * Third value to be shown.
                     * @type {String}
                     */
                    valueC: {
                        type: String,
                        reflectToAttribute: true
                    },
                },

            });
        });
    </script>
</dom-module>

一个使用样式标记扩展原生 <option> 元素的 web 组件。开发人员的样式可以通过将自定义 CSS 属性重写为“样式 API”来实现。

<style is="custom-style" include="demo-pages-shared-styles">
  option[is="special-option"] {
     --special-option-container: { @apply(--layout-horizontal); direction: ltr; } ;
     --special-option-values: { @apply(--layout-flex); @apply(--layout-horizontal); min-height: 3vh; } ;
     --special-option-value-a: { direction: rtl; min-width: 25px; max-width: 25px; } ;
     --special-option-value-b: { direction: rtl; min-width: 150px; max-width: 150px; } ;
     --special-option-value-c: { margin-left: 1vw; } ;
  }
</style>

在 <demo-snippet> 里面

<select name="options">
  <option is="special-option"  value="1" value-a="Magnesium" value-b="43,005344632" value-c="kg">
  </option>
  <option is="special-option"  value="2" value-a="Magnesium" value-b="0,001234556" value-c="kg">
  </option>
  <option is="special-option"  value="3" value-a="Magnesium" value-b="1037,012443111" value-c="kg">
  </option>
</select>

结果应该是中间值-b 始终具有最小宽度，因此对齐长值。

我试图解决这个问题的镜头，围绕着我如何填充（webcomponents-lite.js 或完整的 polyfill）以及我如何为 iframe 和第一页（自动呈现的文档页面）配置 window.Polymer 对象。

到目前为止的结果

与 dom: 'shady' 配置一样

到目前为止，我成功地让原生 <select> 使用这些扩展按钮。所以生命周期正在工作并且选项标签被扩展。

但是，虽然它在 Firefox 上按预期工作，但它在 chrome 中不起作用（选项仍然有效，但样式不适用）。

当我使用 dom: 'shadow' 配置 window.polymer 配置对象时，

  • 铬报告：

    Failed to execute 'createShadowRoot' on 'Element': Shadow root cannot be created on a host which already hosts an user-agent shadow tree. at HTMLOptionElement._createLocalRoot (http://localhost:9001/components/special-option/bower_components/polymer/polymer-mini.html:2001:6)

感谢@Supersharp，我得到了新的见解：由于 Webcomponents V1 不允许创建多个影子根（选项本身已经有一个），所以选择真正的影子 dom 还不是正确的方法。

  • Firefox 仍然产生了相同的结果（显然是因为 polyfill 强制使用 shady dom）

先前的问题

我做错了什么，或者即使在填充时，每个浏览器中的选项标签都无法实现这一点？

但正如聚合物文档所建议的那样，我现在正在尝试开发一个 polyfill 平台（配置dom: 'shady'）。

问题

我是对的，这是不可能的（还）（即使使用阴暗的 dom polyfill）？所以我必须创建一整套 <select> 或 <form> 自定义元素集？

4

0 回答 0