Проблемы с использованием тега SELECT в пользовательском элементе с тегом CONTENT

Вот jsfiddle, показывающий поведение.

Я ожидал, что смогу вставить элементы option в точку вставки в Shadow DOM, но, поскольку select пуст, я не думаю, что это происходит. Инспектор Chrome в любом случае не очень полезен с точками вставки, но я убедился, что мой браузер работает при выполнении других действий с точками вставки, например. ничего, кроме вставки option элементов в select.

Я определяю пользовательский элемент следующим образом:

var CatpantsProto = Object.create(HTMLElement.prototype);

CatpantsProto.createdCallback = function(e) {
  var shadow = this.createShadowRoot();
  var t = document.getElementById('guy');
  var clone = document.importNode(t.content, true);
  shadow.appendChild(clone);
};

document.registerElement('cat-pants', {
  prototype: CatpantsProto
});

Вот шаблон #guy:

<template id="guy">
  <span>Before</span>
  <select>
    <content></content>
  </select>
  <span>After</span>
</template>

Вот использование:

<cat-pants>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</cat-pants>

Опять же, я ожидал, что эти элементы option будут вставлены в select в Shadow DOM, но они не отображаются, когда я открываю раскрывающийся список.

Я подумал, что, может быть, проблема в том, чтобы «получить» из HTMLElement, но это не сработает, если я также реализую HTMLSelectElement.

Я также экспериментировал с тем, чтобы не использовать шаблон и изменять innerHTML shadow напрямую, но это тоже не сработало.

В настоящее время я думаю, что элементы option просто недействительны за пределами selects, datalists или optgroups, и браузер выдает какую-то подгонку, но не сообщает мне об этом.

Я в растерянности и, вероятно, обойду это, создав второй заполнитель элемента item, который преобразуется в элементы option в моем createdCallback. Арх.


javascript custom-element shadow-dom html5-template
person drhayes    schedule 03.03.2015    source источник
comment
У меня кое-что получилось: я создал элемент ‹datalist›, родственный моему пользовательскому элементу. Пользовательский элемент получает идентификатор ‹datalist› и запрашивает его дочерние элементы ‹option› и добавляет их к внутреннему ‹select›. Не оптимально по сравнению с тем, чтобы заставить его работать как родной ‹select›.   -  person drhayes    schedule 03.03.2015

Ответы (1)


arrow_upward
3
arrow_downward

Невозможно создать теневой корень с этим типом элемента, потому что браузер сам создает свой собственный теневой DOM (пользовательский агент) для отображения элемента управления выбора.

Если это так, вы получите следующую ошибку:

Не удалось выполнить createShadowRoot для элемента Element: созданные автором теневые корни отключены для этого элемента.

Вместо этого вы должны расширить сам элемент <select> или скопировать напрямую <option>s с помощью Javascript (не через способ <content>).

person Supersharp    schedule 08.01.2016