Javascript parentElement为空错误，无法找到移动元素的方法

我的文档中有html，我想将其移动到另一个元素中。我有一个颜色选择器我很抱歉你可以在这里找到详细信息：

当我定义parentColorEl时，它表示元素为null。我不知道为什么。我清楚地看到有一个颜色id，后面跟着一个数字。父元素是一个div

<div id="container">
</div>

<div><input id="color0" type="hidden" name="color0" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51, 51, 153);">&nbsp;</div></div>
<div><input id="color1" type="hidden" name="color1" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51, 51, 153);">&nbsp;</div></div>
<div><input id="color2" type="hidden" name="color2" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51, 51, 153);">&nbsp;</div></div>


<script>

class ColorButtons extends HTMLElement {
  constructor(index) {
    // Always call super first in constructor
    super();

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create spans
    var wrapper = document.createElement('span');
    wrapper.setAttribute('class','wrapper');

    shadow.appendChild(wrapper);
    
    let colorEl = document.getElementById('color'+index);
    
    let parentColorEl = colorEl.parentElement
    
    wrapper.appendChild(colorEl);
    
  }
}

customElements.define('color-buttons', ColorButtons);

function updateInterface(){

    container.innerHTML = "";
    
    for(i=0; i<3; ++i){
        container.appendChild(new ColorButtons(i));
    }
    
}
updateInterface()

</script>

类ColorButtons扩展HtmleElement{
建造师（索引）{
//始终在构造函数中首先调用超级
超级（）；
//创建阴影根
var shadow=this.attachShadow（{mode:'open'}）；
//创建跨距
var wrapper=document.createElement（'span'）；
setAttribute（'class'，'wrapper'）；
shadow.appendChild（包装器）；
让colorEl=document.getElementById（'color'+索引）；
让parentColorEl=colorEl.parentElement
appendChild（colorEl）；
}
}
自定义元素。定义（'color-buttons'，ColorButtons）；
函数updateInterface（）{
container.innerHTML=“”；
对于（i=0；在我的示例中这只是一个输入错误。我甚至可以记录元素，并在输出中显示它。我的解决方案是制作自己的颜色选择器。我尝试了3个，但它们都有问题。