Goal: an encapculated widget
Suppose I'm the developer of a widget showing a list of friends, such as:
Your friends Michael, Anna and Shirley love this webpage!
First approach: script that creates span
Naively, I create a script which places this information in a span on the website. However, the owners of ExampleSite can now access the names of your friends by simple DOM operations!
That's a big privacy / security issue.
Second approach: an iframe
I don't want ExampleSite to have access to their friends' names. So instead, I let website owners add the widget with an iframe:
<iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"></iframe>
This works, because the owners of ExampleSite cannot scrape the contents of the iframe. However, this whole iframe thing is rather ugly, because it does not integrate into the styling of the website, while a span does.
Desired approach: Shadow DOM
When reading about Shadow Dom yesterday, I wondered whether that could be a solution to both issues. It would allow me to have a script that creates a span the original website cannot access:
var host = document.querySelector('#friends');
var root = host.webkitCreateShadowRoot();
root.textContent = 'Your friends Michael, Anna and Shirley love this webpage!';
However, **does a Shadow DOM hide its contents from the surrounding page?**
The assumption here is that nobody except my script can access `root`, but is that correct?
The Shadow DOM spec after all says that it offers functional encapsulation, but I actually want trust encapsulation. And while the Component Model Use Cases actually list this use case, I'm not sure whether Shadow DOM realizes the necessary confinement property.