Scenario
Suppose I have a web service capable of fetching a webpage and its static assets (e.g. using PhantomJS). I want to be able to serve the static DOM sub-structure (e.g. everything under the #content div) along with its styling to a new site that shows the extracted webpage on the left side along with the amazing results of my super-amazing awesome machine-learning algorithm for extracting information from webpages on the other side.
Question
Supposing I can send down the HTML sub-structure, CSS, and other asset files down from the server, how do I go about injecting the HTML substructure into a div on my page while scoping the styling?
<!-- partially modified content pulled from another site -->
<div id="content">
<!-- I might pull stylesheets from head of source site -->
<!-- and inject them in content? Or should I just keep -->
<!-- track of styles separately and manually inject them? -->
<link rel="stylesheet" type="text/css" href="theme.css">
<img src="new/path/to/static/resource/that/i/saved"/>
</div>
<!-- my own web page with stuff etc -->
<div id="left">
<!-- INSERT CONTENT DIV AND OTHER ASSETS HERE -->
</div>
<div id="right">
<!-- here I have Vue components and other page interaction stuff -->
</div>
Currently I'm using VueJS for my webpage. I know I can do style scoping using Vue components -- maybe there is a way to leverage that? But I really want to know how to solve this problem in a general, framework-agnostic way. I'm too paralyzed by all these things I think could go wrong to even start...
