构建后如何修改 Shadow DOM 自定义元素？

如何解决构建后如何修改 Shadow DOM 自定义元素？

我目前正在尝试将 bold 标题添加到 calcite-components 中的 calcite-block 标签

要修改 Shadow DOM，您可以扩展 CalciteBlock 类，添加其他属性来修改呈现的元素 - 但是，这已被证明是困难的，因为我无法扩展大型库，因为我对自定义元素没有信心。>

另一种方法是在构建自定义元素后附加 b（粗体）元素。这就是我实现这一目标的方式。首先，我通过传统的路线将元素添加到 DOM 中。

//On document ready
$(document).ready(function() {

    //Iterate all the items to append to the block
    for (var i = 0; i < class_data.length; i++) {
            
            //Create item (with some misc meta data)    
            var $item = $('<calcite-block-section/>')
                .attr('id',i)
                .attr('color',current_col)
                .attr('title',temp_class.title)
                .text(temp_class.desc);
            
            //Descriptions is the calcite block we are appending to
            $("#descriptions").append($item);
        }
    }
});

之后，我检查 MutationObserver 以查看更新何时触发，并将标题文本添加到块中。虽然通常您可以为块设置 text 属性，但自定义元素不允许您设置 HTML 属性。在本例中，添加方解石图标。

//Creates Mutation Observor
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations,observer) {

    //Queries the document
    $($("calcite-block-section")).each(function(index) {

        //Collects attributes
        var id = $(this).attr('id');
        var color = $(this).attr('color');
        var title = $(this).attr('title');
        
        //Gets shadowDOM for element
        var $elem = $(this)[0].shadowRoot.querySelector('.section-header__text');
        
        var $square = $('<calcite-icon icon="squareArea" scale="m"></calcite-icon>')
            .css('color',color);
        
        var $text = $('<b/>').html('&nbsp;&nbsp;' + title);
        
        //Sets the custom title
        $($elem)
            .append($square)
            .append($text)
    });

    //Removes check
    observer.disconnect();
});

//Runs observer
observer.observe($('#descriptions').get(0),{
    childList: true,subtree: true
});

我从测试中收集到的是，MutationObservor 确实会触发，但在呈现自定义元素后不会触发。相反，它会在文档加载后立即运行。其次，单独运行查询选择表明标题创建代码确实产生了预期的结果，这表明问题出在时间上。

我的问题是，这是否是修改自定义元素 DOM 的最佳方法，尤其是在 Calcite 中向块元素添加元素时，以及为什么 MutationObserverloc 在构建元素之前触发。