Shadow DOM: элементы, прикрепленные к теневому DOM, не отображаются - PullRequest
Новая
       37

Shadow DOM: элементы, прикрепленные к теневому DOM, не отображаются

0 голосов
/ 23 января 2020

Я пытаюсь понять, как переключатели работают в тени. У меня есть скрипт-тег, в котором я присоединяю теневой DOM к элементу, а затем добавляю несколько переключателей. Моя проблема в том, что переключатели не рендерится. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Radio Buttons:</p>
<div id="containter">

</div>

<script>
    let shadowContainer = document.getElementById('containter');
    shadowContainer.attachShadow({mode: 'open'});

    let input1 = document.createElement('input');
    input1.setAttribute("type", "radio");
    input1.setAttribute("id", "1");
    input1.setAttribute("name", "group");
    input1.setAttribute("value", "1");

    let input2 = document.createElement('input');
    input2.setAttribute("type", "radio");
    input2.setAttribute("id", "2");
    input2.setAttribute("name", "group");
    input2.setAttribute("value", "2");

    let input3 = document.createElement('input');
    input3.setAttribute("type", "radio");
    input3.setAttribute("id", "3");
    input3.setAttribute("name", "group");
    input3.setAttribute("value", "3");

    shadowContainer.appendChild(input1);
    shadowContainer.appendChild(input2);
    shadowContainer.appendChild(input3);
</script>
</body>
</html>

1 Ответ

1 голос
/ 23 января 2020

Проблема в том, что вы не добавляете элементы в shadowDom, вы добавляете их в div. Просто сохраните возвращаемое значение из .attachShadow и добавьте к нему. Вот ваш пример, делающий именно это. 

let shadowContainer = document.getElementById('containter');
// store the reference
let container = shadowContainer.attachShadow({
  mode: 'open'
});

let input1 = document.createElement('input');
input1.setAttribute("type", "radio");
input1.setAttribute("id", "1");
input1.setAttribute("name", "group");
input1.setAttribute("value", "1");

let input2 = document.createElement('input');
input2.setAttribute("type", "radio");
input2.setAttribute("id", "2");
input2.setAttribute("name", "group");
input2.setAttribute("value", "2");

let input3 = document.createElement('input');
input3.setAttribute("type", "radio");
input3.setAttribute("id", "3");
input3.setAttribute("name", "group");
input3.setAttribute("value", "3");

// append to the reference 
container.appendChild(input1);
container.appendChild(input2);
container.appendChild(input3);
<p>Radio Buttons:</p>
<div id="containter">

</div>
...