Кросс-браузерные расширенные нативные элементы, с Polymer
Привет всем,
Я пытаюсь создать собственное расширение элемента для элементов
Проблема юзабилити:
Это не большая вещь, но проект (оказание услуг), я работал над юзабилити. Особенно визуальные обновления. Таким образом, я нашел выбор для некоторых пунктов, опции которых показывают их информацию не выровненной и неудобной для чтения.
<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 таких вариантов с различными средними десятичными числами.
Моя идея:
Я разрабатываю свой экспериментальный компонент с подготовленной настройкой проекта из Polymer-Cli, которая предназначена для создания автономных веб-компонентов (результаты отображаются внутри
<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>
Веб-компонент, который расширяет собственные элементы
<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 или полное заполнение) и как я настраиваю объект window.Polymer для iframe и первую страницу (автоматически отображаемую страницу документации).
Результаты пока что
Как и в случае с dom: "теневая" конфигурация
До сих пор мне удалось позволить родному
Но хотя он работает так, как задумано в Firefox, он не работает в Chrome (опции все еще работают, но стилизация не применяется).
Когда я настроил объект конфигурации window.polymer с помощью dom: 'shadow',
Хром сообщил:
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 не позволяет создавать несколько теневых корней (опция уже имеет один), переход к истинному теневому дому пока не будет правильным.
- Firefox по-прежнему давал тот же результат (очевидно, из-за полифилла, в любом случае заставляющего сомнительный дом)
предыдущий вопрос
Есть ли что-то, что я делаю неправильно, или это невозможно сделать с помощью тегов параметров в каждом браузере, даже если они заполнены?
Но, как рекомендует документация по полимерам, сейчас я пытаюсь разработать платформу с несколькими заполнителями (настроить dom: 'shady'
).
Вопрос
Правильно ли я понимаю, что это невозможно (пока)(даже с теневым домом polyfill)? Итак, мне нужно создать целый набор