やあ、みんな、
<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 を超える場合があり、中間の 10 進数はさまざまです。
私の考え:
< iron-component-page > の助けを借りて、スタンドアロンの Web コンポーネントを構築することを目的とした Polymer-cli から準備されたプロジェクト設定を使用して実験的コンポーネントを開発しています (したがって、結果は < 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>
<デモスニペット>内
<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 または完全なポリフィル) の方法と、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でも同じ結果が得られました（明らかに、ポリフィルがとにかく怪しげなDOMを強制しているためです）
前の質問
間違っていることがありますか、それともポリフィルされている場合でも、すべてのブラウザのオプションタグでこれを達成できないのですか?
しかし、ポリマーのドキュメントが推奨しているように、今のところポリフィルされたプラットフォーム用に開発しようとしています (configure dom: 'shady')。
質問
これは（まだ）（怪しいDOMポリフィルを使用しても）不可能であるというのは正しいですか？< select > または < form > カスタム要素のセット全体を作成する必要がありますか?