使用Polymer跨浏览器扩展本机元素-Java 学习之路

Heya大家，

我尝试使用聚合物为<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个以上的中间十进制数字 .

我的想法：

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

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

一个web组件，使用可标记的标记扩展本机<option>元素 . 通过将自定义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总是具有最小宽度，因此对齐长值 .

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

迄今为止的结果

与dom：'shady'配置一样

到目前为止，我成功地让原生<select>使用这些扩展按钮 . 所以生命周期正在运行，选项标签也会扩展 .

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

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

chrome报道：

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强制阴影dom无论如何）

先前的问题

有什么东西我做错了，或者即使在polyfilled的情况下，每个浏览器中的选项标签都无法实现这一点？

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

问题

Am i right that this is not possible (yet)(even with shady dom polyfill)? So i'd have to create a whole < select > or < form > set of custom elements?

使用Polymer跨浏览器扩展本机元素