I would like to add html content from the database (so that a part of the page content can be changed externally).
How to add SCSS styling? I use v-html like this but I ahve no idea how to add the style:
<div v-html="ct"></div>
async created() {
this.ct = await this.getPage("blabla");
}
I would prefer not to add the SCSS part in the vuejs style and I already have some other CSS for the other part of the code, but if necessary, the style could be defined in these assets
<style lang="scss" scoped>
#import '~assets/styles/core';
</style>
I found some answers but it doesn't seem like the style comes from another source
Vue.js style v-html with scoped css
or
Add CSS style to v-html
When using scoped CSS, Vue creates dynamically generated selectors to reference elements. However, v-html content does not get dynamically generated selectors, because Vue is not dynamically creating that HTML, but instead just dumping it in. Therefore, if you're using v-html, scoped styles defined within the parent component(s) will not be applied to the child components without the use of deep selectors.
You either need to keep your styles global, import your stylesheet via your Webpack config so that the classnames aren't altered by Vue to match the Vue instances' dynamic selectors, or take the styles specific to the v-html child elements and rewrite them to use deep selectors.
Related
I want to apply one CSS file to only on Home.js component. I don't want this CSS to be applied to other components. For other components, I have a CSS file. But when I apply that CSS file to Home.js, it also applies to other components, and it mixes everything.
Once a css file is loaded it is accessible in all files. If you need to avoid the style being conflicted, it would be better to create a unique id/class name or use inline styling
I'd like to have scoped style & unscoped style in the same .vue file at the same time. The reason is because I have some component specific style that I want to be scoped, but also some vue-boostrap custom style that I'd like to apply, but because the elements are in another component (the vue-bootstrap one), if I scope this style it won't work. However, this custom bootstrap styles are specific to this component, so I'd like to have the CSS written in this same file, to avoid files hell.
So I'd like to have <style lang="scss"> and <style lang="scss" scoped> at the same time. But when I do, it only takes the scoped one. Any ideas ?
You can load scss files in your script part of your Vue component
typescript
import "#/path/to/style.scss"
javascript
require("#/path/to/style.scss")
that way you can have load multiple style sheets into your component at once.
I have a project in angular 7, I am loading a component dynamically using routes, in dynamically loaded component style-sheet I am adding some styles for body tag and already existing component tags and they're not reflecting in DOM.
body {
padding-bottom: 150px;
}
Styles are coming in the dynamically loaded component style-sheet, but I don't see them applying on DOM elements.
By default angular only applies the styles within a component, only to HTML elements within that components template (view encapsulation). To override this behaviour you can set an option in the components directive.
For more info see https://angular.io/guide/component-styles#view-encapsulation
If you're defining styles within a component they will not apply outside of the component.
Check out my StackBlitz template.
My global styles are defined in a scss/ folder to apply all global styles downwards into the DOM.
Component styles are then only used to override global styles or for component specific styles used no where else in my project.
This is how I set up my Angular styles. Let me know if you need more help.
The Angular documentation for :host does not mention that we can style all host elements at once. I have added this CSS at a “global” level:
:host {
width: 100%;
}
but there was no effect. However, this works fine in the CSS at the component level:
:host(app-search) {
width: 100%;
}
where app-search is a component, app-search.component.ts.
Is is possible to write a :host selector for all components or must this be declared multiple times at the component level?
By its very definition (or specification), :host can never be used at a global level. It is created to use from component level and to select the parent component (which is called shadow host) from the children (which is called shadow tree).
For more clarification, Angular's :host selector is a special selectors from the world of shadow DOM style scoping (described in the CSS Scoping Module Level 1 page on the W3C site).
The angular documentation clearly specifies that you should use this selector to select the parent component from within the child component. But it may seem unclear to you if you don't have any idea how shadow tree works. see the documentation.
If you need to style any component from a global stylesheet, there is a style.css file automatically added at a global scope in Angular. Just put your CSS in that file and you can find it available globally in all components.
Component level CSS files make your CSS modular. This is a great feature because:
You can use the CSS class names and selectors that make the most
sense in the context of each component.
Class names and selectors are local to the component and don't collide with classes and selectors
used elsewhere in the application.
Changes to styles elsewhere in the
application don't affect the component's styles.
You can co-locate
the CSS code of each component with the TypeScript and HTML code of
the component, which leads to a neat and tidy project structure.
You
can change or remove component CSS code without searching through the
whole application to find where else the code is used.
Although it is configurable, I strongly recommend not to use ViewEncapsulation.None. It will make kill all your CSS modularity which you can avail easily using global CSS files without affecting the scoping restriction.
In your app-search.component.ts file, you could set:
encapsulation: ViewEncapsulation.None
like this
#Component({
templateUrl: 'app-search.component.html',
styleUrls: ['app-search.component.css'],
encapsulation: ViewEncapsulation.None
})
This prevents you from having to rewrite styles and enables styles on a global level.
You could also try applying the styles directly into the index.html file. These styles will also be global, preventing you from rewriting styles at the component level.
I'm creating a moduler html/js application with self contained UI components. Each of my UI component may have its own template file (structure), js files (behavior) and css files (presentation).
Now I would like these components to have a 'default' presentation with an own local css file
This is not a problem, and I can define the default styling on the component 'local' css
But in addition I need global theming too, theme css defines styles for the 'whole app'
If an user applies a theme, all local component styles should be overridden by the theme css
I know I can do this with marking all styles on the global theme css as 'important'. But I dont want to go that way. Any other suggestions on how to approach this?
If the elements being styled are addressed via the same selectors e.g. #something li in all stylesheets, then the stylesheet being included later will overwrite anything previously set (unless something is 'important'). This should allow you to do use themes -- just import those themes after the local styles has already being applied.
I'm not sure I understand your question about the local and global styling. But, styles for each components should not interfere with the global style provided you are giving the elements proper names. (It's a good practice to use class/id names instead of long nested selectors like .some-table tr td .another- table tr td { ... } for both rendering performance and readability reasons)
In other word, you can in each of your page write these:
include the base default layout
overwrite the base with global layout
again overwrite with user-define themes
Given the way you structure RequireJS, I would suggest the following:
Allow, or require, styling with style.css in each component
Provide a structure for themes like a themes/ folder which must have the same folder as the components folder
When optimizing or pulling the CSS, if a theme is defined, pull the CSS from the theme folder instead of the main component folder, or fallback to the component style.css (perhaps make this fallback configurable) if not found, with a warning.
You could inject your style element (for each component) using the scope attribute, so it would only affect the DOM scope it's injected to, and not starting from the root element (HTML).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet
<article>
<div>The scoped attribute allows for you to include style elements mid-document.
Inside rules only apply to the parent element.</div>
<p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
<section>
<style scoped>
p { color: red; }
</style>
<p>This should be red.</p>
</section>
</article>
Browser support (currently): Chrome and FF