I'm facing an issue with a webpage where I can define an HTML template using a modal editor, and then this template is inserted into a div for preview purposes. The text area within the template may contain HTML/CSS (and possibly some JavaScript).
The problem arises when the CSS applied to the template starts affecting the entire page. While the user is conscious of the elements inside their template, they might not be aware of how it impacts the overall webpage content.
I want to restrict the influence of this CSS to just the template area. One idea I had was to switch the container div to an iframe, but that seems complex as I would need to retrieve the content later for saving purposes.
Is there a simpler solution available for this problem?
Consider the following code snippet as an example template:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
border-style: none;
margin-left: 4%;
margin-right: 4%;
}
td{
line-height: 150%;
padding-top: 1%;
padding-bottom: 1%;
}
.solidTableFull{
//additional styles
}
.solidTableMarge{
//additional styles
}
span{
color: #0070c0;
}
</style>
</head>
<body style="zoom: 100%;">
//content
//content
//content
</body>
</html>