Why & How to Use Web Components & Shadow DOM

Web components are encapsulated HTML tags that are created by using a set of web platform APIs. The driving idea behind web components is the ability to make custom HTML elements/tags with encapsulated styling and custom behavior that can be shared and reused across modern browsers. This expands the ability for teams to use advanced, more styled components without having to rebuild them.

Read on about why you should use web components, as we focus on one of its core technologies: Shadow DOM.

What Are the Three Technologies of Web Components?

Web components can be made up of three different technologies, although they don't need to include all of them. Custom Elements, Shadow DOM, and HTML templates.

1. Custom elements are created with JavaScript APIs. These elements are created and named by the developer. A standard for web components is that the tag should have a - in the name. Thus a web component may have a tag.
2. Web Components can use the Shadow DOM. The Shadow DOM is an encapsulated DOM inside the HTML document. This encapsulation keeps the styling and details inside the shadow itself and doesn’t let styles from outside come in nor inside go out. This means that any styles will apply only to the shadow code and are private to that component.
3. HTML templates are templates that are custom defined but not instantiated until they are called.

Most modern browsers natively support web components. There are a few exceptions to this, notably Microsoft IE 11 and Edge. Luckily there are polyfills available, which are JavaScript scripts that add new functionality in the browsers, so that web components can be understood by these browsers as well.

What is Shadow DOM?

Shadow DOM is a web components technology that allows specific sections of the HTML document to be completely isolated from the rest of the document. This means CSS styles that are applied to the DOM are not applied to the Shadow DOM, and vice versa.

Shadow DOM helps with the portability and reusability of the custom web components.

Web Components are gaining popularity. For example, YouTube and GitHub use them. Managed applications are also starting to use web components with the Shadow DOM. One of these applications is Salesforce Lightning. Salesforce is a Customer Relationship Management (CRM) tool focused on managing, maintaining, and initiating relationships with customers and prospects.

Salesforce is the top Customer Relationship Management solution in the market today. Over 150,000 customers use Salesforce including companies like BBVA, T-Mobile, and Unilever. Clearly Salesforce Lightning has a wide customer base and the need for testing these applications is quite large.

Web Components Benefits

Here are the top benefits of using web components:

1. Web components make it easier to build sophisticated, stylized apps with custom behavior for less coding and more flexibility.

2. Because they are encapsulated, web component stylings and data are not affected by external stylings, nor are their stylings applied externally. 

3. Web components are very robust.

4. They can be used by any JavaScript framework, including Angular, React, and Vue.

5. Regardless of framework, web components can be consumed across all the teams in the organization.

To learn more about web components, visit MDN Web Docs or WebComponents.org.

Challenges of Testing Shadow DOM with Selenium

The use of the Shadow DOM creates challenges for test automation. Selenium is the standard for GUI functional testing and it does not natively support the Shadow DOM, so it isn't possible to get the locators of elements in the Shadow DOM. This means that we cannot build automated tests that include these elements.

Typically, GUI functional tests use Selenium to get element locators on a web page. Once we have the ability to locate elements on the web page, it is easy to create automation to drive GUI functional testing. For example, we can create an automated test that logs in to a webpage if we have:

• The web application URL.
• A valid username and password data.
• The location of the username and password text input fields.
• The location of the login button.

Now imagine that the text input fields and the button were part of a custom login web component that uses Shadow DOM. Because the component is private, we cannot use Selenium to get the locators. Our test automation will fail because we don’t know where the text input fields and buttons are on the page.

Very few automated testing tools on the market offer out-of-the-box ability to automate testing of applications using web components and the Shadow DOM. It is possible to build a custom platform to automate the dtesting of applications using the Shadow DOM but this requires significant engineering time and effort.

The Solution: A New Way to Find Locators

Testing applications that use Shadow DOM will require a new way to find locators. Thankfully, BlazeMeter has the ability to identify and get the locators of elements in the Shadow DOM and allows for automated testing that includes web components that are using the Shadow DOM. 

Experience BlazeMeter in action with our free trial today.

START TESTING NOW

This blog was originally published on March 27, 2017, and has since been updated for accuracy and relevance.