Our team was tasked to create an embeddable script (widget) that displays functionality from our web application. When released to the public however, we found that the interface was not looking right in some cases. It turned out that some pages that embedded our script was able to affect the styles of our widget with its own CSS declarations.
Our resident front-end guru recommended that we use the Shadow DOM for the widget implementation. This will essentially shield our widget’s styles from being overridden by the page that embedded it. I have not used Shadow DOM previously so this piqued my curiosity. Back in the day, we would use iframes to implement something like this.
According to the documentation:
Shadow DOM enables you to attach a DOM tree to an element, and have the internals of this tree hidden from JavaScript and CSS running in the page.
https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
Basically we create a custom element in the page, where that element contains an entire encapsulated DOM tree. Sounds awesome.
Our widget was updated to be rendered inside the Shadow DOM, and it solved the problems we encountered when users embed it from their page.
The Shadow DOM functionality was already implemented in some browsers a decade ago, but became more commonly used just a few years back. Having a custom element within the DOM that is unaffected by external styles or scripts is a very useful tool for web development.
Beyond HTML
The concept of a Shadow DOM sparked another thought that went beyond web development.
This idea of a system that cannot be affected or overridden by outside influence is a common theme in philosophy. Stoicism has a concept called logos spermatikos or the divine law of the universe. This is the universal logic or reason that governs how all things behave. This divine reason cannot be altered nor controlled by anyone.
According to Stoic beliefs, each of us has a piece of this divine logos. This provides humans the ability to reason. In Christianity, this is very similar to the Holy Spirit that came down to the disciples after Christ’s sacrifice. This inner spirit “filled the apostles with truth” and enabled them to spread the word of God. This illustrates that deep inside us is our purest essence. Within ourselves, there lies an incorruptible self. Some would even say that this is our soul, the thing that remains once our bodies can no longer sustain life in this world.
Integrate your shadow
The attributes of the Shadow DOM also has applications in life.
As the contents of the Shadow DOM cannot be manipulated by the page that contains it, our inner logos cannot be corrupted by our deeds and environment. No matter our past, no matter how many layers of shame, anxiety, and sin cover our humanity, it is heartening to know that we have an incorruptible inner self. And it is up to us to peel the outside layers so that our real essence shines through.
As the Shadow DOM is part of the page, it can enhance its functionality and improve its interface. Your inner logos is you. Only you can make it shine through your personality. You are a being of divine reason, the harbinger of truth. How will you use this reality to improve yourself? Are your actions today in accordance to your pure self? In times of distress, do you know that there is this hidden well that you can use to gain strength?
The Shadow DOM, while embedded, is still independent. Your inner self is independent. Yes, you have responsibilities in life: being a parent, working at a job, and belonging to a clan or organization. But that isn’t what defines you. You are not an doctor, you are not a parent, you are not someone’s savior. You are just you. If everything you built falls apart, what’s left is your true self. Why wait for catastrophe in order to bring it out?
If you do not defend your boundaries, then they cease to exist. This has been true throughout history for entities as large as countries, to individuals like yourself. If you do not establish boundaries between your home and your family, problems from one will seep out into the other.
Learn how to encapsulate your inner self to the outside world. No matter what happens in your environment, no matter what others may say or think of you, only you can decide how to live. Utilize your own logos and live life according to its truth.
Photo by Dhruv on Unsplash