To embed components into existing HTML pages without breaking styles or functionality, the HTML shadow DOM is typically used. We will use this concept to embed styled HTML into a document with its own set of styles that TX Text Control creates by converting a document such as Office Open XML (DOCX) or PDF.

TX Text Control provides a feature to convert documents to HTML including all styles and formatting. But in this example, we will be using a feature that has been the subject of a recent blog post, where new stylesheets are created from documents where no styles are present.

Learn More

This example shows how to identify paragraphs that are commonly formatted, and then convert them to style sheets. The example checks for character and paragraph formatting and compares them using Reflection.

Converting Paragraphs to Styles by Comparing Formatting Attributes

Generating the HTML

First, we need to create a new instance of the ServerTextControl class and load a document. In this example, we are loading a DOCX file. The document is loaded and the HTML is generated using the Save method with the TXTextControl.StreamType.HTMLFormat StreamType parameter.

public IActionResult Index()
{
    using (var tx = new TXTextControl.ServerTextControl())
    {
        var filename = "computers.docx";

        tx.Create();
        tx.Load($"Documents/{filename}", TXTextControl.StreamType.WordprocessingML);

        var styleManager = new StyleManager(tx);
        styleManager.ApplyStyles();

        var saveSettings = new TXTextControl.SaveSettings
        {
            CssSaveMode = TXTextControl.CssSaveMode.Inline
        };

        tx.Save($"Documents/{filename}.htm", 
            TXTextControl.StreamType.HTMLFormat, 
            saveSettings);

        using (var sr = new StreamReader($"Documents/{filename}.htm"))
        {
            ViewBag.Document = sr.ReadToEnd();
        }
    }

    return View();
}

After loading the DOCX file into the ServerTextControl, the styles are applied using the ApplyStyles function from the above article.

Finally, the HTML is exported and returned in a ViewBag for demo purposes.

Embedding the HTML

Now, we have the HTML that was generated from the document. This HTML can be embedded into an existing HTML page using the shadow DOM. The shadow DOM is a feature that allows you to attach a hidden DOM tree to an element in the regular DOM tree. This hidden tree is separate from the main document and can be styled and manipulated without affecting the main document.

First, we need to create a new shadow root in the view where the document will be rendered. The view is made up of two columns, with the shadow DOM being inserted in the second column. Inside the shadow DOM, the raw html from the ViewBag is being rendered.

<div class="row">
    <div class="col-md-4 text-danger bg-black p-3">
        <p>The document is rendered as HTML next to this box.</p>
    </div>
    <div class="col-md-8">
            <template shadowrootmode="open">
                @Html.Raw(ViewBag.Document)

                <style>

                    :host > p {
                        /*font-family: Arial, sans-serif !important;*/
                    }

                    .Style1 {
                        color: red;
                    }

                </style>

            </template>
    </div>
</div>

The following screenshot shows the result of the shadow DOM with the HTML rendered from the DOCX file:

The HTML contains the generated CSS classes that are only used for the shadow DOM. Because we generated the styles in the controller method, we know the class names and can now modify the styles inside the shadow DOM. In the example above, the font size for Style1 is changed to red.

The commented code in the style section would change the entire font family to Arial.

By using the shadow DOM, the styles of the embedded HTML can be controlled and modified without affecting the main document.

Conclusion

Using the shadow DOM to embed HTML into existing documents is a powerful feature to keep the styles of the embedded content separate from the main document. This allows you to control the styles of the embedded content without affecting the main document.