Custom HTML Icons Stripped After innerHTML Manipulation in Quill 2.0

[MuhammadMaazK]

I'm trying to inject custom HTML (star rating icons) into Quill 2.0 editor content, but the elements are immediately removed by Quill's MutationObserver. The stars appear briefly then vanish.

What I'm Trying to Do

I need to display read-only star ratings inline with editor content. Users can edit text but not the ratings.
Example: Product Quality: ★★★★☆ (stars should float right)

• I have a function that converts patterns like (4) into star icons:

function convertToStars(htmlContent) {
    var ratingPattern = /\(_(\d)_\)/g;
    
    return htmlContent.replace(ratingPattern, function(match, rating) {
        var score = parseInt(rating);
        if (isNaN(score) || score < 0 || score > 5) {
            return '';
        }
        
        var starsHTML = '<span class="rating-stars" contenteditable="false" style="float: right;">';
        starsHTML += '<i class="fas fa-star filled"></i>'.repeat(score);
        starsHTML += '<i class="fas fa-star empty"></i>'.repeat(5 - score);
        starsHTML += '</span>';
        
        return starsHTML;
    });
}

Then I try to inject it into Quill:

var editor = document.querySelector('#my-editor');
var quill = Quill.find(editor);
var content = decodeURIComponent(savedContent); // Contains: "Quality: (_4_)"

// Set initial content
var delta = quill.clipboard.convert({html: content});
quill.setContents(delta);

// Try to replace patterns with stars
setTimeout(function() {
    var currentHTML = quill.root.innerHTML;
    var withStars = convertToStars(currentHTML);
    quill.root.innerHTML = withStars;
    // Stars disappear immediately!
}, 100);

Issue;

After setting quill.root.innerHTML, the custom with star elements disappears within milliseconds. I believe Quill's MutationObserver detects the change and removes unregistered elements

What's the proper way in Quill 2.0.3 to inject read-only custom HTML that contains multiple child elements (like icon tags)?