Marta is a Client Services Consultant at Broadcom, specializing in Continuous Testing, DevOps and Automation.  She has over 18 years experience in helping teams develop and deliver software more efficiently.  

Become a JMeter and Continuous Testing Pro

Start Learning
Slack

Test Your Website Performance NOW! |

arrowPlease enter a URL with http(s)
Mar 03 2021

Web Components and Shadow DOM: Why and How to Use Them

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, styled components without having to rebuild them. Read on about why you should use web components, as we focus on one of its technologies: Shadow DOM.

Web Components Benefits

1. Web components make it easier to build sophisticated, stylized apps with custom behavior with 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.

Breakdown of Web Components Technologies

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 <my-super-happy-day-slider.>
  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.

Shadow DOM

Shadow DOM is very important for web components because it 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. This helps with 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 number 1 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.

Challenges 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 testing 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 Scriptless Testing 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. Read my next blog to learn How to Create Automated Tests for Salesforce Lightning Applications

   
arrowPlease enter a URL with http(s)

Interested in writing for our Blog?Send us a pitch!