How to prevent CSS leaking when I need to add HTML codes from other resource to my page
The situation here I have is kind of special:
I am using Vue.js, Vuetify and OpenLayers to create an app. which shows useful information about the layers to the user.
In one of my vue component, I want to show the user the WMSFeatureInfo. which is actually HTML codes in String. (When I query the WMS layer using HTTP GET method, I always get a string back, which contains HTML codes in String)
The way I show the user this HTML String is like this: (I will skip the part how I get the HTML String because it is not related to this question)
<v-container
align-content-center
v-html="feature.WMSFeatureInfo"
>
</v-container>
The problem is, the HTML String contains also CSS styles in it, and it leaks out. So every time after I send HTTP GET Request, get the response of this HTML String and present the information to the user, my whole app's font, table background color, and etc. will be changed (Obviously the CSS styles in the HTML String are overwriting my own CSS style).
Is there a way that I can put the received HTML codes on my page but ignore the CSS codes in it? Or maybe there is a way that I can make the CSS from vuetify always stronger than other?
To make the question more clear, this is the HTML String I got from the GET request:
<html xmlns:esri_wms="http://www.esri.com/wms" xmlns="http://www.esri.com/wms">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<style type="text/css">sub{font-family: arial;color: #202020} table, th, td {border:1px solid #e5e5e5;border-collapse:collapse; padding: 3px;font-family: arial;color: #202020;} table { margin-bottom:10px; } thead { font-weight: bold; }tbody { font-size: 80%; }th, td {valign: top;text-align: left;} thead td, th, .property_name {background-color: #75AE7E;} </style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="30%"/>
<col/>
</colgroup>
<thead>
<tr><td colspan="2">schummerung</td></tr>
</thead>
<tbody>
<tr>
<td class="property_name">Stretchedvalue</td>
<td class="property_value">181</td>
</tr>
<tr>
<td class="property_name">PixelValue</td>
<td class="property_value">181</td>
</tr>
</tbody>
</table>
</body>
</html>
So after I add these HTML codes to my <v-container> (it's just a <div>), my other tables on the page (outside of the div container) will get a green background.
I want the CSS styles of this HTML codes only have an effect inside of the <div>, but not effects my other tables and fonts on my page.
javascript html css vuejs2 vuetify.js
asked Nov 19 '18 at 19:09
Min XIEMin XIE
588
|
show 1 more comment
The situation here I have is kind of special:
I am using Vue.js, Vuetify and OpenLayers to create an app. which shows useful information about the layers to the user.
In one of my vue component, I want to show the user the WMSFeatureInfo. which is actually HTML codes in String. (When I query the WMS layer using HTTP GET method, I always get a string back, which contains HTML codes in String)
The way I show the user this HTML String is like this: (I will skip the part how I get the HTML String because it is not related to this question)
<v-container
align-content-center
v-html="feature.WMSFeatureInfo"
>
</v-container>
The problem is, the HTML String contains also CSS styles in it, and it leaks out. So every time after I send HTTP GET Request, get the response of this HTML String and present the information to the user, my whole app's font, table background color, and etc. will be changed (Obviously the CSS styles in the HTML String are overwriting my own CSS style).
Is there a way that I can put the received HTML codes on my page but ignore the CSS codes in it? Or maybe there is a way that I can make the CSS from vuetify always stronger than other?
To make the question more clear, this is the HTML String I got from the GET request:
<html xmlns:esri_wms="http://www.esri.com/wms" xmlns="http://www.esri.com/wms">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<style type="text/css">sub{font-family: arial;color: #202020} table, th, td {border:1px solid #e5e5e5;border-collapse:collapse; padding: 3px;font-family: arial;color: #202020;} table { margin-bottom:10px; } thead { font-weight: bold; }tbody { font-size: 80%; }th, td {valign: top;text-align: left;} thead td, th, .property_name {background-color: #75AE7E;} </style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="30%"/>
<col/>
</colgroup>
<thead>
<tr><td colspan="2">schummerung</td></tr>
</thead>
<tbody>
<tr>
<td class="property_name">Stretchedvalue</td>
<td class="property_value">181</td>
</tr>
<tr>
<td class="property_name">PixelValue</td>
<td class="property_value">181</td>
</tr>
</tbody>
</table>
</body>
</html>
So after I add these HTML codes to my <v-container> (it's just a <div>), my other tables on the page (outside of the div container) will get a green background.
I want the CSS styles of this HTML codes only have an effect inside of the <div>, but not effects my other tables and fonts on my page.
javascript html css vuejs2 vuetify.js
asked Nov 19 '18 at 19:09
Min XIEMin XIE
588
Write that string into an iframe
– charlietfl
Nov 19 '18 at 19:48
@charlietfl I only know how to create an iframe with url, but I will search how to do it with HTML String. Thanks for your advise!
– Min XIE
Nov 19 '18 at 19:50
2 ways...can use document.write or base64 encode it and use a data url. Both ways easy to research
– charlietfl
Nov 19 '18 at 19:51
@charlietfl I just use the srcdoc attribute of the iframe and put all the HTML codes in. And set the default border to inherit. It looks just same as before and the CSS styles are not leaking anymore, thank you!
– Min XIE
Nov 19 '18 at 20:07
Great... i learned something new from that myself. Never knew you could do that to be honest. Note it appears it isn't supported in IE
– charlietfl
Nov 19 '18 at 20:08
|
show 1 more comment
The situation here I have is kind of special:
I am using Vue.js, Vuetify and OpenLayers to create an app. which shows useful information about the layers to the user.
In one of my vue component, I want to show the user the WMSFeatureInfo. which is actually HTML codes in String. (When I query the WMS layer using HTTP GET method, I always get a string back, which contains HTML codes in String)
The way I show the user this HTML String is like this: (I will skip the part how I get the HTML String because it is not related to this question)
<v-container
align-content-center
v-html="feature.WMSFeatureInfo"
>
</v-container>
The problem is, the HTML String contains also CSS styles in it, and it leaks out. So every time after I send HTTP GET Request, get the response of this HTML String and present the information to the user, my whole app's font, table background color, and etc. will be changed (Obviously the CSS styles in the HTML String are overwriting my own CSS style).
Is there a way that I can put the received HTML codes on my page but ignore the CSS codes in it? Or maybe there is a way that I can make the CSS from vuetify always stronger than other?
To make the question more clear, this is the HTML String I got from the GET request:
<html xmlns:esri_wms="http://www.esri.com/wms" xmlns="http://www.esri.com/wms">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<style type="text/css">sub{font-family: arial;color: #202020} table, th, td {border:1px solid #e5e5e5;border-collapse:collapse; padding: 3px;font-family: arial;color: #202020;} table { margin-bottom:10px; } thead { font-weight: bold; }tbody { font-size: 80%; }th, td {valign: top;text-align: left;} thead td, th, .property_name {background-color: #75AE7E;} </style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="30%"/>
<col/>
</colgroup>
<thead>
<tr><td colspan="2">schummerung</td></tr>
</thead>
<tbody>
<tr>
<td class="property_name">Stretchedvalue</td>
<td class="property_value">181</td>
</tr>
<tr>
<td class="property_name">PixelValue</td>
<td class="property_value">181</td>
</tr>
</tbody>
</table>
</body>
</html>
So after I add these HTML codes to my <v-container> (it's just a <div>), my other tables on the page (outside of the div container) will get a green background.
I want the CSS styles of this HTML codes only have an effect inside of the <div>, but not effects my other tables and fonts on my page.
javascript html css vuejs2 vuetify.js
asked Nov 19 '18 at 19:09
Min XIEMin XIE
588
The situation here I have is kind of special:
I am using Vue.js, Vuetify and OpenLayers to create an app. which shows useful information about the layers to the user.
In one of my vue component, I want to show the user the WMSFeatureInfo. which is actually HTML codes in String. (When I query the WMS layer using HTTP GET method, I always get a string back, which contains HTML codes in String)
The way I show the user this HTML String is like this: (I will skip the part how I get the HTML String because it is not related to this question)
<v-container
align-content-center
v-html="feature.WMSFeatureInfo"
>
</v-container>
The problem is, the HTML String contains also CSS styles in it, and it leaks out. So every time after I send HTTP GET Request, get the response of this HTML String and present the information to the user, my whole app's font, table background color, and etc. will be changed (Obviously the CSS styles in the HTML String are overwriting my own CSS style).
Is there a way that I can put the received HTML codes on my page but ignore the CSS codes in it? Or maybe there is a way that I can make the CSS from vuetify always stronger than other?
To make the question more clear, this is the HTML String I got from the GET request:
<html xmlns:esri_wms="http://www.esri.com/wms" xmlns="http://www.esri.com/wms">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<style type="text/css">sub{font-family: arial;color: #202020} table, th, td {border:1px solid #e5e5e5;border-collapse:collapse; padding: 3px;font-family: arial;color: #202020;} table { margin-bottom:10px; } thead { font-weight: bold; }tbody { font-size: 80%; }th, td {valign: top;text-align: left;} thead td, th, .property_name {background-color: #75AE7E;} </style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="30%"/>
<col/>
</colgroup>
<thead>
<tr><td colspan="2">schummerung</td></tr>
</thead>
<tbody>
<tr>
<td class="property_name">Stretchedvalue</td>
<td class="property_value">181</td>
</tr>
<tr>
<td class="property_name">PixelValue</td>
<td class="property_value">181</td>
</tr>
</tbody>
</table>
</body>
</html>
So after I add these HTML codes to my <v-container> (it's just a <div>), my other tables on the page (outside of the div container) will get a green background.
I want the CSS styles of this HTML codes only have an effect inside of the <div>, but not effects my other tables and fonts on my page.
javascript html css vuejs2 vuetify.js
javascript html css vuejs2 vuetify.js
asked Nov 19 '18 at 19:09
Min XIEMin XIE
588
asked Nov 19 '18 at 19:09
Min XIEMin XIE
588
edited Nov 19 '18 at 19:48
Min XIE
asked Nov 19 '18 at 19:09
Min XIEMin XIE
588
asked Nov 19 '18 at 19:09
Min XIEMin XIE
588
asked Nov 19 '18 at 19:09
Min XIEMin XIE
588
588
Write that string into an iframe
– charlietfl
Nov 19 '18 at 19:48
@charlietfl I only know how to create an iframe with url, but I will search how to do it with HTML String. Thanks for your advise!
– Min XIE
Nov 19 '18 at 19:50
2 ways...can use document.write or base64 encode it and use a data url. Both ways easy to research
– charlietfl
Nov 19 '18 at 19:51
@charlietfl I just use the srcdoc attribute of the iframe and put all the HTML codes in. And set the default border to inherit. It looks just same as before and the CSS styles are not leaking anymore, thank you!
– Min XIE
Nov 19 '18 at 20:07
Great... i learned something new from that myself. Never knew you could do that to be honest. Note it appears it isn't supported in IE
– charlietfl
Nov 19 '18 at 20:08
|
show 1 more comment
Write that string into an iframe
– charlietfl
Nov 19 '18 at 19:48
@charlietfl I only know how to create an iframe with url, but I will search how to do it with HTML String. Thanks for your advise!
– Min XIE
Nov 19 '18 at 19:50
2 ways...can use document.write or base64 encode it and use a data url. Both ways easy to research
– charlietfl
Nov 19 '18 at 19:51
@charlietfl I just use the srcdoc attribute of the iframe and put all the HTML codes in. And set the default border to inherit. It looks just same as before and the CSS styles are not leaking anymore, thank you!
– Min XIE
Nov 19 '18 at 20:07
Great... i learned something new from that myself. Never knew you could do that to be honest. Note it appears it isn't supported in IE
– charlietfl
Nov 19 '18 at 20:08
Write that string into an iframe
– charlietfl
Nov 19 '18 at 19:48
Write that string into an iframe
– charlietfl
Nov 19 '18 at 19:48
@charlietfl I only know how to create an iframe with url, but I will search how to do it with HTML String. Thanks for your advise!
– Min XIE
Nov 19 '18 at 19:50
@charlietfl I only know how to create an iframe with url, but I will search how to do it with HTML String. Thanks for your advise!
– Min XIE
Nov 19 '18 at 19:50
2 ways...can use document.write or base64 encode it and use a data url. Both ways easy to research
– charlietfl
Nov 19 '18 at 19:51
2 ways...can use document.write or base64 encode it and use a data url. Both ways easy to research
– charlietfl
Nov 19 '18 at 19:51
@charlietfl I just use the srcdoc attribute of the iframe and put all the HTML codes in. And set the default border to inherit. It looks just same as before and the CSS styles are not leaking anymore, thank you!
– Min XIE
Nov 19 '18 at 20:07
@charlietfl I just use the srcdoc attribute of the iframe and put all the HTML codes in. And set the default border to inherit. It looks just same as before and the CSS styles are not leaking anymore, thank you!
– Min XIE
Nov 19 '18 at 20:07
Great... i learned something new from that myself. Never knew you could do that to be honest. Note it appears it isn't supported in IE
– charlietfl
Nov 19 '18 at 20:08
Great... i learned something new from that myself. Never knew you could do that to be honest. Note it appears it isn't supported in IE
– charlietfl
Nov 19 '18 at 20:08
|
show 1 more comment
2 Answers
2
active
oldest
votes
This issue is caused by element styling and css import rules.
Take for instance the thead you use in your style tag, since the style tag in the imported element has a higher priority over any other styling it will apply over any other styling on the thead element.
I think this issue could have been avoided by using classnames to style instead of element styling.
Since the creator of the response did not do this you could parse it to HTML with JS and filter out the style tag. using the DOMParser, and standard DOM element APIs. And after that loop through the parsedDocument.body and place the elements in a target element.
I think this should do the trick, unless you want to keep the styles.
In that case you could manually copy the styles and add them to your stylesheet nested under the target element.
// Initiates parser
const parser = new DOMParser();
// Returns Document object (can be used as Document.getElementById('etc'))
let parsedDoc = parser.parseFromString('<html><style>thead{background: #000}</style></html>', 'text/html');
// Gets first style tag
let styleTag = parsedDoc.getElementsByTagName('style')[0];
// Removes first style tag
parsedDoc.head.removeChild(styleTag);
// Removes reference to the style tag
styleTag = null;
// Place each element in the target element
for (let element of parsedDoc.body.children) {
// document.getElementById('target').appendChild(element);
}If this is not the wanted result, or messy by the project standards, the Iframe will also work.
answered Nov 20 '18 at 11:16
Tino T.Tino T.
13
add a comment |
Vue.use(Vuetify, {
theme: false
});
Will disable completly the addition of theme style inside the html. This means you won't have colors anymore :
white on white buttons and white on black icons
To get them to work again - in a more controlled way of course - I took the previously generated css <head><style id="vuetify-theme-stylesheet">...</style> to assets/contained-theme.less
vue-app/
- node_modules/
- public/
- src/
- assets/
- contained-theme.less
- components /
- App.vue
- main.js
- package.json
My contained-theme looks like :
.vuetify-container {
...copy the #vuetify-theme-stylesheet css here
}
And it has to be imported in your main.js
import Vue from 'vue';
import App from './App.vue';
import Vuetify from 'vuetify';
import './assets/contained-theme.less'; // <--------
This prevents the css to apply outside from the root component of your application
<v-app id="app" class="vuetify-container">
<HelloWorld/>
</v-app>
You might need to add to your webpack build the less-loader package to load the less file :)
theme colors are back again!
answered Nov 22 '18 at 10:13
William AttiéWilliam Attié
33
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381120%2fhow-to-prevent-css-leaking-when-i-need-to-add-html-codes-from-other-resource-to%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This issue is caused by element styling and css import rules.
Take for instance the thead you use in your style tag, since the style tag in the imported element has a higher priority over any other styling it will apply over any other styling on the thead element.
I think this issue could have been avoided by using classnames to style instead of element styling.
Since the creator of the response did not do this you could parse it to HTML with JS and filter out the style tag. using the DOMParser, and standard DOM element APIs. And after that loop through the parsedDocument.body and place the elements in a target element.
I think this should do the trick, unless you want to keep the styles.
In that case you could manually copy the styles and add them to your stylesheet nested under the target element.
// Initiates parser
const parser = new DOMParser();
// Returns Document object (can be used as Document.getElementById('etc'))
let parsedDoc = parser.parseFromString('<html><style>thead{background: #000}</style></html>', 'text/html');
// Gets first style tag
let styleTag = parsedDoc.getElementsByTagName('style')[0];
// Removes first style tag
parsedDoc.head.removeChild(styleTag);
// Removes reference to the style tag
styleTag = null;
// Place each element in the target element
for (let element of parsedDoc.body.children) {
// document.getElementById('target').appendChild(element);
}If this is not the wanted result, or messy by the project standards, the Iframe will also work.
answered Nov 20 '18 at 11:16
Tino T.Tino T.
13
add a comment |
This issue is caused by element styling and css import rules.
Take for instance the thead you use in your style tag, since the style tag in the imported element has a higher priority over any other styling it will apply over any other styling on the thead element.
I think this issue could have been avoided by using classnames to style instead of element styling.
Since the creator of the response did not do this you could parse it to HTML with JS and filter out the style tag. using the DOMParser, and standard DOM element APIs. And after that loop through the parsedDocument.body and place the elements in a target element.
I think this should do the trick, unless you want to keep the styles.
In that case you could manually copy the styles and add them to your stylesheet nested under the target element.
// Initiates parser
const parser = new DOMParser();
// Returns Document object (can be used as Document.getElementById('etc'))
let parsedDoc = parser.parseFromString('<html><style>thead{background: #000}</style></html>', 'text/html');
// Gets first style tag
let styleTag = parsedDoc.getElementsByTagName('style')[0];
// Removes first style tag
parsedDoc.head.removeChild(styleTag);
// Removes reference to the style tag
styleTag = null;
// Place each element in the target element
for (let element of parsedDoc.body.children) {
// document.getElementById('target').appendChild(element);
}If this is not the wanted result, or messy by the project standards, the Iframe will also work.
answered Nov 20 '18 at 11:16
Tino T.Tino T.
13
add a comment |
This issue is caused by element styling and css import rules.
Take for instance the thead you use in your style tag, since the style tag in the imported element has a higher priority over any other styling it will apply over any other styling on the thead element.
I think this issue could have been avoided by using classnames to style instead of element styling.
Since the creator of the response did not do this you could parse it to HTML with JS and filter out the style tag. using the DOMParser, and standard DOM element APIs. And after that loop through the parsedDocument.body and place the elements in a target element.
I think this should do the trick, unless you want to keep the styles.
In that case you could manually copy the styles and add them to your stylesheet nested under the target element.
// Initiates parser
const parser = new DOMParser();
// Returns Document object (can be used as Document.getElementById('etc'))
let parsedDoc = parser.parseFromString('<html><style>thead{background: #000}</style></html>', 'text/html');
// Gets first style tag
let styleTag = parsedDoc.getElementsByTagName('style')[0];
// Removes first style tag
parsedDoc.head.removeChild(styleTag);
// Removes reference to the style tag
styleTag = null;
// Place each element in the target element
for (let element of parsedDoc.body.children) {
// document.getElementById('target').appendChild(element);
}If this is not the wanted result, or messy by the project standards, the Iframe will also work.
answered Nov 20 '18 at 11:16
Tino T.Tino T.
13
This issue is caused by element styling and css import rules.
Take for instance the thead you use in your style tag, since the style tag in the imported element has a higher priority over any other styling it will apply over any other styling on the thead element.
I think this issue could have been avoided by using classnames to style instead of element styling.
Since the creator of the response did not do this you could parse it to HTML with JS and filter out the style tag. using the DOMParser, and standard DOM element APIs. And after that loop through the parsedDocument.body and place the elements in a target element.
I think this should do the trick, unless you want to keep the styles.
In that case you could manually copy the styles and add them to your stylesheet nested under the target element.
// Initiates parser
const parser = new DOMParser();
// Returns Document object (can be used as Document.getElementById('etc'))
let parsedDoc = parser.parseFromString('<html><style>thead{background: #000}</style></html>', 'text/html');
// Gets first style tag
let styleTag = parsedDoc.getElementsByTagName('style')[0];
// Removes first style tag
parsedDoc.head.removeChild(styleTag);
// Removes reference to the style tag
styleTag = null;
// Place each element in the target element
for (let element of parsedDoc.body.children) {
// document.getElementById('target').appendChild(element);
}If this is not the wanted result, or messy by the project standards, the Iframe will also work.
// Initiates parser
const parser = new DOMParser();
// Returns Document object (can be used as Document.getElementById('etc'))
let parsedDoc = parser.parseFromString('<html><style>thead{background: #000}</style></html>', 'text/html');
// Gets first style tag
let styleTag = parsedDoc.getElementsByTagName('style')[0];
// Removes first style tag
parsedDoc.head.removeChild(styleTag);
// Removes reference to the style tag
styleTag = null;
// Place each element in the target element
for (let element of parsedDoc.body.children) {
// document.getElementById('target').appendChild(element);
}// Initiates parser
const parser = new DOMParser();
// Returns Document object (can be used as Document.getElementById('etc'))
let parsedDoc = parser.parseFromString('<html><style>thead{background: #000}</style></html>', 'text/html');
// Gets first style tag
let styleTag = parsedDoc.getElementsByTagName('style')[0];
// Removes first style tag
parsedDoc.head.removeChild(styleTag);
// Removes reference to the style tag
styleTag = null;
// Place each element in the target element
for (let element of parsedDoc.body.children) {
// document.getElementById('target').appendChild(element);
}answered Nov 20 '18 at 11:16
Tino T.Tino T.
13
edited Nov 20 '18 at 11:56
answered Nov 20 '18 at 11:16
Tino T.Tino T.
13
answered Nov 20 '18 at 11:16
Tino T.Tino T.
13
answered Nov 20 '18 at 11:16
Tino T.Tino T.
13
13
add a comment |
add a comment |
Vue.use(Vuetify, {
theme: false
});
Will disable completly the addition of theme style inside the html. This means you won't have colors anymore :
white on white buttons and white on black icons
To get them to work again - in a more controlled way of course - I took the previously generated css <head><style id="vuetify-theme-stylesheet">...</style> to assets/contained-theme.less
vue-app/
- node_modules/
- public/
- src/
- assets/
- contained-theme.less
- components /
- App.vue
- main.js
- package.json
My contained-theme looks like :
.vuetify-container {
...copy the #vuetify-theme-stylesheet css here
}
And it has to be imported in your main.js
import Vue from 'vue';
import App from './App.vue';
import Vuetify from 'vuetify';
import './assets/contained-theme.less'; // <--------
This prevents the css to apply outside from the root component of your application
<v-app id="app" class="vuetify-container">
<HelloWorld/>
</v-app>
You might need to add to your webpack build the less-loader package to load the less file :)
theme colors are back again!
answered Nov 22 '18 at 10:13
William AttiéWilliam Attié
33
add a comment |
Vue.use(Vuetify, {
theme: false
});
Will disable completly the addition of theme style inside the html. This means you won't have colors anymore :
white on white buttons and white on black icons
To get them to work again - in a more controlled way of course - I took the previously generated css <head><style id="vuetify-theme-stylesheet">...</style> to assets/contained-theme.less
vue-app/
- node_modules/
- public/
- src/
- assets/
- contained-theme.less
- components /
- App.vue
- main.js
- package.json
My contained-theme looks like :
.vuetify-container {
...copy the #vuetify-theme-stylesheet css here
}
And it has to be imported in your main.js
import Vue from 'vue';
import App from './App.vue';
import Vuetify from 'vuetify';
import './assets/contained-theme.less'; // <--------
This prevents the css to apply outside from the root component of your application
<v-app id="app" class="vuetify-container">
<HelloWorld/>
</v-app>
You might need to add to your webpack build the less-loader package to load the less file :)
theme colors are back again!
answered Nov 22 '18 at 10:13
William AttiéWilliam Attié
33
add a comment |
Vue.use(Vuetify, {
theme: false
});
Will disable completly the addition of theme style inside the html. This means you won't have colors anymore :
white on white buttons and white on black icons
To get them to work again - in a more controlled way of course - I took the previously generated css <head><style id="vuetify-theme-stylesheet">...</style> to assets/contained-theme.less
vue-app/
- node_modules/
- public/
- src/
- assets/
- contained-theme.less
- components /
- App.vue
- main.js
- package.json
My contained-theme looks like :
.vuetify-container {
...copy the #vuetify-theme-stylesheet css here
}
And it has to be imported in your main.js
import Vue from 'vue';
import App from './App.vue';
import Vuetify from 'vuetify';
import './assets/contained-theme.less'; // <--------
This prevents the css to apply outside from the root component of your application
<v-app id="app" class="vuetify-container">
<HelloWorld/>
</v-app>
You might need to add to your webpack build the less-loader package to load the less file :)
theme colors are back again!
answered Nov 22 '18 at 10:13
William AttiéWilliam Attié
33
Vue.use(Vuetify, {
theme: false
});
Will disable completly the addition of theme style inside the html. This means you won't have colors anymore :
white on white buttons and white on black icons
To get them to work again - in a more controlled way of course - I took the previously generated css <head><style id="vuetify-theme-stylesheet">...</style> to assets/contained-theme.less
vue-app/
- node_modules/
- public/
- src/
- assets/
- contained-theme.less
- components /
- App.vue
- main.js
- package.json
My contained-theme looks like :
.vuetify-container {
...copy the #vuetify-theme-stylesheet css here
}
And it has to be imported in your main.js
import Vue from 'vue';
import App from './App.vue';
import Vuetify from 'vuetify';
import './assets/contained-theme.less'; // <--------
This prevents the css to apply outside from the root component of your application
<v-app id="app" class="vuetify-container">
<HelloWorld/>
</v-app>
You might need to add to your webpack build the less-loader package to load the less file :)
theme colors are back again!
answered Nov 22 '18 at 10:13
William AttiéWilliam Attié
33
answered Nov 22 '18 at 10:13
William AttiéWilliam Attié
33
answered Nov 22 '18 at 10:13
William AttiéWilliam Attié
33
answered Nov 22 '18 at 10:13
William AttiéWilliam Attié
33
33
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381120%2fhow-to-prevent-css-leaking-when-i-need-to-add-html-codes-from-other-resource-to%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Write that string into an iframe
– charlietfl
Nov 19 '18 at 19:48
@charlietfl I only know how to create an iframe with url, but I will search how to do it with HTML String. Thanks for your advise!
– Min XIE
Nov 19 '18 at 19:50
2 ways...can use document.write or base64 encode it and use a data url. Both ways easy to research
– charlietfl
Nov 19 '18 at 19:51
@charlietfl I just use the srcdoc attribute of the iframe and put all the HTML codes in. And set the default border to inherit. It looks just same as before and the CSS styles are not leaking anymore, thank you!
– Min XIE
Nov 19 '18 at 20:07
Great... i learned something new from that myself. Never knew you could do that to be honest. Note it appears it isn't supported in IE
– charlietfl
Nov 19 '18 at 20:08