Blog Feed Post

Shadow DOMs: Encapsulation in Progressive Web Applications

Most modern websites include widgets from different sources for enhanced user engagement. These widgets often include social media buttons so the user can ‘like’ or share content, a video-playing widget that will automatically play content on the sidebar, etc. As the structure of the webpage becomes more complex, it’s necessary for the developers to ensure that the third-party code doesn’t collide with the base page code and create conflicts. Otherwise, the JavaScript of the base page could end up unintentionally modifying the parts of the widget and vice versa.

How do we ensure that encapsulation is achieved? Shadow DOMs to the rescue! Just as Batman is the mysterious ‘shadow’ of Bruce Wayne in protecting Gotham city, shadow DOMs provide a way to isolate portions of the main DOM, thereby achieving protection from styling, access, and modification via common means.

What is shadow DOM?

Shadow DOMs are used while building web widgets to hide the implementation details of the widget from the JavaScript and CSS that are included on the webpage. The encapsulation is achieved by overlaying the normal DOM subtree with a special document fragment that contains another subtree of nodes.

The building blocks of shadow DOM are:

Shadow Host: The element that is responsible for creating a scoped Shadow DOM subtree.

Shadow Root: The root of the DOM subtree containing the shadow DOM nodes. It is a special node, which creates the boundary between the normal DOM nodes and the Shadow DOM nodes. This boundary is what is responsible for encapsulation.

Here is an Illustration of shadow DOM:

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow1-300x160.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow1-768x411.png 768w" sizes="(max-width: 1023px) 100vw, 1023px" />

The nodes in green represent the main DOM tree, which also contains the shadow host. This shadow host contains references to several other shadow DOM trees. At the root of each shadow DOM subtree is a shadow root. The shadow root is a special document fragment DOM node type which encapsulates its child nodes from the outside world.

However, when the webpage is rendered, the main DOM, as well as the shadow DOM, would be rendered as a single tree. While parsing, whenever the browser encounters the shadow host, the browser disregards the subsequent children nodes of the main DOM and instead the focus is shifted to the node’s shadow DOM subtree.

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow2-300x263.png 300w" sizes="(max-width: 581px) 100vw, 581px" />

Implementation Details:

Creation of shadow host and root nodes can be done through JavaScript.

Example: If this is the HTML element for which the host should be created –

<div>Hi there! </div>

We just add the following JavaScript code to create the shadow DOM:

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow3-300x73.png 300w" sizes="(max-width: 371px) 100vw, 371px" />

Now, the <div> tag becomes the hosting element of the shadow root whose content is “Yo!” And the original textual content (“Hi there!”) is “hidden,” as the DOM subtree under the shadow root is encapsulated.

This is how the page is rendered:

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow4-300x174.png 300w" sizes="(max-width: 351px) 100vw, 351px" />

Shadow DOMs vs. iFrames

Now that we have a basic understanding of what shadow DOMs are, it is necessary for us to know why they are preferred over the traditional iFrames.

iFrames are used to assure separate scope and styling. It is designed to embed a full document within HTML documents. This means accessing values in a DOM element that is within an iFrame, from the parent document, is quite troublesome.

In contrast, shadow DOMs will provide easier encapsulation by creating another clone of the DOM or part of it.

How can we monitor the performance of pages containing iFrames or shadow DOMs?

While it is definitely possible to monitor individual pages containing such elements through Catchpoint’s web test feature, ensuring that users can complete every action (for example: click/type) is also very important and this can be done through Catchpoint’s ability to create multi-step transaction tests.

Transaction scripts in Catchpoint use Selenium commands for execution. Logic can be inserted into these scripts to perform actions like click/type, validate a text pattern, and so on.

Accessing the elements within an iFrame from the same domain can be done via Web APIs along with JavaScript.

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow5-300x134.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow5-768x344.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow5-1024x459.png 1024w" sizes="(max-width: 1235px) 100vw, 1235px" />

Similarly, accessing shadow DOM elements could be done through JavaScript using the top-down approach to interact with the page.

http://blog.catchpoint.com/wp-content/uploads/2017/10/shadow6-300x143.png 300w" sizes="(max-width: 638px) 100vw, 638px" />

Also, to monitor the performance of specific elements, for example, the load time of a specific button on the page (even if it is included within an iframe/shadow DOM), Catchpoint allows you to create custom metrics using the Insights feature. This feature provides greater visibility into end-to-end application performance, correlate external monitoring data to internal performance indicators, and faster identification of performance problems.

The post Shadow DOMs: Encapsulation in Progressive Web Applications appeared first on Catchpoint's Blog - Web Performance Monitoring.

Read the original blog entry...

More Stories By Mehdi Daoudi

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.

Latest Stories
Continuous Delivery makes it possible to exploit findings of cognitive psychology and neuroscience to increase the productivity and happiness of our teams. In his session at 22nd Cloud Expo | DXWorld Expo, Daniel Jones, CTO of EngineerBetter, will answer: How can we improve willpower and decrease technical debt? Is the present bias real? How can we turn it to our advantage? Can you increase a team’s effective IQ? How do DevOps & Product Teams increase empathy, and what impact does empath...
As many know, the first generation of Cloud Management Platform (CMP) solutions were designed for managing virtual infrastructure (IaaS) and traditional applications. But that's no longer enough to satisfy evolving and complex business requirements. In his session at 21st Cloud Expo, Scott Davis, Embotics CTO, explored how next-generation CMPs ensure organizations can manage cloud-native and microservice-based application architectures, while also facilitating agile DevOps methodology. He expla...
Most technology leaders, contemporary and from the hardware era, are reshaping their businesses to do software. They hope to capture value from emerging technologies such as IoT, SDN, and AI. Ultimately, irrespective of the vertical, it is about deriving value from independent software applications participating in an ecosystem as one comprehensive solution. In his session at @ThingsExpo, Kausik Sridhar, founder and CTO of Pulzze Systems, discussed how given the magnitude of today's application ...
Modern software design has fundamentally changed how we manage applications, causing many to turn to containers as the new virtual machine for resource management. As container adoption grows beyond stateless applications to stateful workloads, the need for persistent storage is foundational - something customers routinely cite as a top pain point. In his session at @DevOpsSummit at 21st Cloud Expo, Bill Borsari, Head of Systems Engineering at Datera, explored how organizations can reap the bene...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
You know you need the cloud, but you're hesitant to simply dump everything at Amazon since you know that not all workloads are suitable for cloud. You know that you want the kind of ease of use and scalability that you get with public cloud, but your applications are architected in a way that makes the public cloud a non-starter. You're looking at private cloud solutions based on hyperconverged infrastructure, but you're concerned with the limits inherent in those technologies. What do you do?
Sanjeev Sharma Joins June 5-7, 2018 @DevOpsSummit at @Cloud Expo New York Faculty. Sanjeev Sharma is an internationally known DevOps and Cloud Transformation thought leader, technology executive, and author. Sanjeev's industry experience includes tenures as CTO, Technical Sales leader, and Cloud Architect leader. As an IBM Distinguished Engineer, Sanjeev is recognized at the highest levels of IBM's core of technical leaders.
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...
In his general session at 21st Cloud Expo, Greg Dumas, Calligo’s Vice President and G.M. of US operations, discussed the new Global Data Protection Regulation and how Calligo can help business stay compliant in digitally globalized world. Greg Dumas is Calligo's Vice President and G.M. of US operations. Calligo is an established service provider that provides an innovative platform for trusted cloud solutions. Calligo’s customers are typically most concerned about GDPR compliance, application p...
SYS-CON Events announced today that Synametrics Technologies will exhibit at SYS-CON's 22nd International Cloud Expo®, which will take place on June 5-7, 2018, at the Javits Center in New York, NY. Synametrics Technologies is a privately held company based in Plainsboro, New Jersey that has been providing solutions for the developer community since 1997. Based on the success of its initial product offerings such as WinSQL, Xeams, SynaMan and Syncrify, Synametrics continues to create and hone inn...
Mobile device usage has increased exponentially during the past several years, as consumers rely on handhelds for everything from news and weather to banking and purchases. What can we expect in the next few years? The way in which we interact with our devices will fundamentally change, as businesses leverage Artificial Intelligence. We already see this taking shape as businesses leverage AI for cost savings and customer responsiveness. This trend will continue, as AI is used for more sophistica...
The 22nd International Cloud Expo | 1st DXWorld Expo has announced that its Call for Papers is open. Cloud Expo | DXWorld Expo, to be held June 5-7, 2018, at the Javits Center in New York, NY, brings together Cloud Computing, Digital Transformation, Big Data, Internet of Things, DevOps, Machine Learning and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding busin...
Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
No hype cycles or predictions of a gazillion things here. IoT is here. You get it. You know your business and have great ideas for a business transformation strategy. What comes next? Time to make it happen. In his session at @ThingsExpo, Jay Mason, an Associate Partner of Analytics, IoT & Cybersecurity at M&S Consulting, presented a step-by-step plan to develop your technology implementation strategy. He also discussed the evaluation of communication standards and IoT messaging protocols, data...
Product connectivity goes hand and hand these days with increased use of personal data. New IoT devices are becoming more personalized than ever before. In his session at 22nd Cloud Expo | DXWorld Expo, Nicolas Fierro, CEO of MIMIR Blockchain Solutions, will discuss how in order to protect your data and privacy, IoT applications need to embrace Blockchain technology for a new level of product security never before seen - or needed.