I want to have Web Components hosted by one site, which another site cannot access the inner DOM or Javascript of. Exactly like with iframes, but which can be rendered inside the HTML better, for example sizing to incorporate their content etc.
There have been many discussions about this but in 2019 when I ask this, is anything implemented to do this?
EDIT: Let me be totally clear - I want the JS for the component to be served from our servers, requests to our server to be done from the component’s JS, render stuff in the component, but not let the enclosing site get it or put a trojan horse in the component. I am fine w the encloing site providing CSS but no HTML or JS. Can this be done?
How would it communicate with the component, analogous to postMessage?
Finally, is it possible for the COMPONENTS JS to access the outer containing website’s DOM and thereby find other components and communicate? This last one ain’t possible with iframes on another domain.
Simple answer: No.
Web Components Do not isolate JS. Just DOM and CSS.
But you can put all of your JS within your class, or in an ES6 Module, or in an IIFE and that would isolate it.
But I doubt that Web Components will ever be a 100% replacement for <iframe>. Nor do I think they were meant to be such.
I would not be surprised if the <iframe> were to become deprecated and eventually removed from browsers.
UPDATE
Keeping ALL of the JS code inside your component's class or inside an IIFE will somewhat protect the code. The HTML and CSS are already sand-boxed inside the component. If your code was in an IIFE or in an ES6 module then other code would have to have access to the source file and be able to modify it in order to change it.
Communication from the outside with the component is done by the outside code calling functions of the component or setting properties and attributes of the component.
Communication from the component to the outside is traditionally done by dispatching events. Talking directly from one component to another is a messy option and really should be avoided. It is up to the parent code to listen to events from all its children and then call functions or set properties/attributes on other children.
If you use shadowDOM then the enclosing site can only change the CSS of your components if you make certain aspects of the CSS available to them. This is done either with CSS Varaibles or by using <slot> to allow the enclosing app to place their own HTML/CSS inside your component. This could open you up to some things you may not want though.
The code that is in the class, or in an IIFE can always access anything in the DOM. Remember that JS is not sand-boxed and can do anything any other JS can do. But it is more difficult, though maybe not impossible, for the enclosing app to make changes to your component classes. Make sure your classes are frozen to prevent sub-classing.
One other thing to know is that if you have someone else loading their website from their server and then loading your component files from your server then you may have CORS problems. Especially if your code tries to load data using XHR/Fetch, then you may have CORS issues.