Search code examples
htmlweb-component

Shadow DOM prevents leakage of style but not leakage of script

I was learning about web components and understood how shadow DOM prevents the leakage of style from the custom component to the main DOM.

But the scripts defined in custom component are still leaking as I am able to access the functions from the main DOM. Is there a solution for this?

Solution

  • JavaScript can access DOM, JavaScript does not run in DOM.

    Thus shadowDOM has nothing to do with when/how/what JavaScript does.

    A Web page has only one global scope (running JavaScript)

    Thus <script> tags you add in shadowDOM run in global scope.

    What are you trying to achieve?