Есть ли способ использовать querySelector, чтобы получить открытую тень дом

Question

Есть ли способ использовать querySelector, чтобы получить открытую тень дом

1

Предположим, что я создал и вставил такой элемент

<template id="react-web-component">
  <span>template stuff</span
  <script src="/static/js/bundle.js" type="text/javascript"></script>
</template>
<script>
  (function (window, document) {
    const doc = (document._currentScript || document.currentScript).ownerDocument;
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function () {
          const template = doc.querySelector('template#react-web-component').content;
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.appendChild(template.cloneNode(true));
        },
      },
    });
    document.registerElement('react-web-component', { prototype: proto });
  })(window, document);
</script>
<react-web-component></react-web-component>

Теперь я хочу использовать querySelector для доступа к открытой теневой базе моего элемента. Как это:

document.querySelector('react-web-component::shadow')

Но это не работает. Есть ли другой путь?

редактировать в ответ на @Supersharp ответ

Извините, я не объяснял. Я использую webpack style-loader который принимает только селектор CSS, который он использует с document.querySelector, поэтому то, что я прошу, - это селектор CSS, который я могу использовать таким образом.

Lukas 08 авг. 2017, в 17:04

Источник

Теги:

javascript

shadow-dom

html5-template

2 ответа

1

Получите это свойство shadowRoot узла Shadow:

document.querySelector('react-web-component').shadowRoot

Обновить

Раньше был такой селектор CSS, но теперь он устарел.

Возможно, вы можете попробовать использовать обычную DOM вместо Shadow DOM.

Supersharp 08 авг. 2017, в 19:02

0

Извините, я не проясняю себя. Я использую загрузчик style-loader webpack, который принимает только тот селектор CSS, который он использует с document.querySelector , поэтому я спрашиваю о селекторе CSS, который я могу использовать таким образом.
Lukas 08 авг. 2017, в 20:41
1

Там нет селектора для этого. Может быть, вам стоит подумать не использовать теневой дом.
Supersharp 08 авг. 2017, в 20:43
0

Сделай ответ, и я приму
Lukas 08 авг. 2017, в 20:43

Показать ещё 1 комментарий

Ещё вопросы

Извините, я не проясняю себя. Я использую загрузчик style-loader webpack, который принимает только тот селектор CSS, который он использует с document.querySelector , поэтому я спрашиваю о селекторе CSS, который я могу использовать таким образом.
Там нет селектора для этого. Может быть, вам стоит подумать не использовать теневой дом.

euvl · Accepted Answer · 2017-08-08T19-50-00.000Z

Для него есть редакторский проект (поэтому он еще не существует), если я правильно понял.

https://drafts.csswg.org/css-scoping/#selectors

Поэтому ответ "нет", вы не можете этого сделать.