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.
5. Regardless of framework, web components can be consumed across all the teams in the organization.
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.
- 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.
- HTML templates are templates that are custom defined but not instantiated until they are called.
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