# Preview: TX Text Control DocumentViewer Becomes a Web Component

> The next version of the TX Text Control DocumentViewer for ASP.NET (Core) and Angular is becoming a Web Component that can be easily used directly in JavaScript. This article gives an overview of the advantages and how those Web Components are integrated.

- **Author:** Bjoern Meyer
- **Published:** 2023-03-10
- **Modified:** 2026-07-17
- **Description:** The next version of the TX Text Control DocumentViewer for ASP.NET (Core) and Angular is becoming a Web Component that can be easily used directly in JavaScript. This article gives an overview of the advantages and how those Web Components are integrated.
- **3 min read** (522 words)
- **Tags:**
  - ASP.NET
  - DocumentViewer
  - Angular
  - Web Component
- **Web URL:** https://www.textcontrol.com/blog/2023/03/10/preview-tx-text-control-documentviewer-is-becoming-a-web-component/
- **LLMs URL:** https://www.textcontrol.com/blog/2023/03/10/preview-tx-text-control-documentviewer-is-becoming-a-web-component/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/03/10/preview-tx-text-control-documentviewer-is-becoming-a-web-component/llms-full.txt

---

Web Components are custom HTML tags defined in JavaScript that are reusable with encapsulated functionality and that can be used in any web project. No specific "HTML Helper" such as MVC or Angular component views are required. In order to use Web Components, typically you only need to import the JavaScript and to add the custom HTML element tag to your HTML.

### Web Component Advantages

Internally, the DocumentViewer will be changed to a Web Component, but can be also added via the MVC HTML Helper or the Angular component. Major advantages of this approach is that each instance of the Web Component uses an encapsulated shadow DOM with it's own style and markup. These are the major advantages:

- Create more than one instance of the DocumentViewer
- Style each instance individually
- Access each instance via JavaScript

### Adding Web Components

The element name of the Web Component is *<tx-document-viewer>* and can be simply added to any HTML page:

```
<script src="/TextControl/GetResource?Resource=minimized.tx-viewer.min.js"></script>
<script src="/TextControl/GetResource?Resource=minimized.tx-viewer-component.min.js"></script>

<tx-document-viewer
	id="viewer1"
	settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1}'>
</tx-document-viewer>
```

When looking at the dynamically created DOM including the shadow DOM created by the TX Text Control DocumentViewer, you can see that the DocumentViewer instance has been created in the shadow DOM:

```
<tx-document-viewer id="viewer1">
  #shadow-root (open)
  <div id="txViewer">
    <link href="/TextControl/GetResource?Resource=minimized.tx-viewer.min.css" rel="stylesheet" type="text/css">
    <div id="tx-documentViewer" class="no-select">
    <!--...-->
    </div>
  </div>
</tx-document-viewer>
```

### Using JavaScript

Each instance is triggering a *documentViewerLoaded* event that gives access to the created instance:

```
window.addEventListener("documentViewerLoaded", function (e) {
  e.target.TXDocumentViewer.loadDocument(btoa("Hi there!"));
});
```

But a better way to access the created instance(s) is to use the id of the created Web Component element:

```
viewer1.loadDocument(btoa("<strong>Viewer1</strong>"));
```

### Multiple Instances

Previously, it was not possible to use more than one instance of the DocumentViewer on a page. This problem is solved with the introduction of Web Components. Now, it is possible to add unlimited number of instances. Each instance can be separately accessed through JavaScript:

```
<script src="/TextControl/GetResource?Resource=minimized.tx-viewer.min.js"></script>
<script src="/TextControl/GetResource?Resource=minimized.tx-viewer-component.min.js"></script>

<tx-document-viewer
  id="viewer1"
  settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1}'>
 </tx-document-viewer>

<tx-document-viewer
  id="viewer2"
  settings='{"documentData":"VGV4dCBDb250cm9s", "dock":1}'>
</tx-document-viewer>

<script>

	function loadDocuments() {
		viewer1.loadDocument(btoa("<strong>Viewer1</strong>"));
		viewer2.loadDocument(btoa("<strong>Viewer2</strong>"));
	}
	
</script>
```

### Separate Stylesheets

Stylesheets can be manipulated individually for each instance by accessing the shadow DOM stylesheets programmatically. This change has another positive side-effect. If you have a CSS class named equally to an existing class of the DocumentViewer, the classes in the shadow DOM are not affected. The following JavaScript code changes the font color of the class *\#docName* which is the document name string in the status bar of the DocumentViewer:

```
viewer1.shadowRoot.styleSheets[0].addRule('#docName', 'color: red;');
```

### Backwards Compatibility

The new concept will be backwards compatible. In case, you are using the ASP.NET Core MVC HTML Helper, you can still use the helper and access the viewer programmatically using the *TXDocumentViewer* object. Even if you are using multiple instances of the viewer inserted using the MVC HTML Helper, the last created instance is accessible through the *TXDocumentViewer* object.

### Availability

This version is currently in beta and will be released as an RC (Release Candidate) preview release very soon for your own testing. This new feature and many others are part of the current major release 31.0. The version of the DocumentViewer that is going to have these changes is **31.2.2**.

Further upcoming features in this version:

- PDF.js rendering
- .NET compatible regular expressions for form field validation
- Asynchronous page refreshing after zooming

Stay tuned!

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Electronic Signatures: Document Audit Trails](https://www.textcontrol.com/blog/2021/10/14/electronic-signatures-document-audit-trails/llms.txt)
- [Combine Form Fields, Merge Fields and Signature Boxes to Request Signatures](https://www.textcontrol.com/blog/2021/10/12/combine-form-fields-merge-fields-and-signature-boxes-to-request-signatures/llms.txt)
- [eSign Demo: Requesting Signatures from Multiple Signers](https://www.textcontrol.com/blog/2021/10/07/esign-demo-requesting-signatures-from-multiple-signers/llms.txt)
- [DocumentViewer 29.2 (29.0.302.500) Final Released](https://www.textcontrol.com/blog/2021/07/27/documentviewer-29-302-final-released/llms.txt)
- [DocumentViewer: Deploying Forms](https://www.textcontrol.com/blog/2021/07/02/document-viewer-deploying-forms/llms.txt)
- [Smart Documents: Embedding Documents in PDF Containers](https://www.textcontrol.com/blog/2021/06/24/smart-document-containers-embedding-documents-in-pdf/llms.txt)
- [DocumentViewer Annotations: Highlight Text](https://www.textcontrol.com/blog/2021/06/18/document-viewer-annotations-highlight-text/llms.txt)
- [Creation of Custom Electronic Signature Boxes](https://www.textcontrol.com/blog/2021/06/15/creation-of-custom-electronic-signature-boxes/llms.txt)
- [Updated DocumentViewer Features: Zooming and Panning](https://www.textcontrol.com/blog/2020/08/24/new-documentviewer-features-zooming-and-panning/llms.txt)
- [Building an ASP.NET Core (.NET 6) Backend for Angular Applications](https://www.textcontrol.com/blog/2020/07/16/building-an-aspnet-core-backend-for-angular-applications/llms.txt)
- [Angular DocumentViewer Final Released](https://www.textcontrol.com/blog/2020/07/13/angular-documentviewer-final-released/llms.txt)
- [Angular DocumentViewer: Loading Documents from an ASP.NET Core Backend Web API](https://www.textcontrol.com/blog/2020/06/08/angular-documentviewer-loading-documents-from-backend/llms.txt)
- [DocumentViewer for Angular Beta Released](https://www.textcontrol.com/blog/2020/06/05/document-viewer-for-angular-beta-released/llms.txt)
- [Creating an Angular DocumentViewer Application](https://www.textcontrol.com/blog/2020/06/05/creating-an-angular-document-viewer-application/llms.txt)
- [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt)
- [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt)
- [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt)
- [Implementing a Security Middleware for Angular Document Editor Applications in C#](https://www.textcontrol.com/blog/2024/10/14/implementing-a-security-middleware-for-angular-document-editor-applications/llms.txt)
- [Meet Text Control at DDC .NET Developer Conference 2024](https://www.textcontrol.com/blog/2024/10/07/meet-text-control-at-ddc-net-developer-conference-2024/llms.txt)
- [Visit Text Control at VSLive! in Orlando, Florida](https://www.textcontrol.com/blog/2024/10/01/visit-tx-text-control-at-vslive-in-orlando-florida/llms.txt)
- [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt)
- [Back in the Pocono Mountains: Meet Text Control at TechBash 2024](https://www.textcontrol.com/blog/2024/09/24/back-in-the-pocono-mountains-meet-text-control-at-techbash-2024/llms.txt)
- [Back from Copenhagen Developers Festival 2024](https://www.textcontrol.com/blog/2024/09/05/back-from-copenhagen-developers-festival-2024/llms.txt)
- [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt)
- [Video Tutorial: Creating a MailMerge Template and JSON Data Structure](https://www.textcontrol.com/blog/2024/08/16/video-tutorial-creating-a-mailmerge-template-and-json-data-structure/llms.txt)