DEV Community

Bhupesh Chandra Joshi
Bhupesh Chandra Joshi

Posted on

Overview of Shadow DOM

Overview of Shadow DOM

  • Shadow DOM: A web technology that allows developers to encapsulate a part of a web page, creating a hidden DOM tree. This means elements inside the Shadow DOM are isolated from the main document's styles and scripts.

The Role of /deep/

  • /deep/: Also known as the shadow-piercing combinator, this was a CSS feature that allowed developers to style elements inside a Shadow DOM from outside it. Essentially, it let CSS "break through" the encapsulation.
  • Deprecation: /deep/ was eventually deprecated because it undermined the encapsulation principles of the Shadow DOM. It created more complexity and potential issues than it resolved, leading to its removal from browsers.

Modern Alternatives (2025)

  1. Shadow Parts:

    • ::part() Selector: This allows developers to style specific parts of a Shadow DOM that have been explicitly exposed for styling.
    • Example:
     custom-element::part(button) {
       color: blue;
     }
    
  • This means that only the button part of custom-element can be styled, maintaining encapsulation.
  1. CSS Custom Properties:

    • Variables in Shadow DOM: Developers can pass CSS variables into Shadow DOMs, enabling reusable and customizable styles.
    • Example:
     custom-element {
       --button-color: blue;
     }
    
  • This allows for dynamic styling while keeping the encapsulation intact.

Key Takeaway

  • Adaptation to Change: The content emphasizes that technology evolves, and developers must stay updated with modern standards. What worked in the past (like /deep/) may not be the best solution today.

Call to Action

  • The text encourages readers to share their experiences with deprecated tools and adapt to new technologies.

Conclusion

In summary, the piece discusses the evolution of styling methods for Shadow DOM elements, highlighting the shift from /deep/ to more robust and encapsulated methods like ::part() and CSS custom properties. It serves as a reminder for developers to remain flexible and informed about changing technologies.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay