How would I do something like this:
<style>
Nested {
color: blue;
}
</style>
<Nested />
i.e. How do I apply a style to a component from its parent?
You need to pass props to the parent component with export let, then tie those props to class or style in the child component.
You can either put a style tag on the element in the child you want to style dynamically and use a variable you export for the parent to determine the value of a style directly, then assign the color on the tag like this:
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested color="green"/>
<!-- in Nested.svelte -->
<script>
export let color;
</script>
<p style="color: {color}">
Yes this will work
</p>
Upside here is flexibility if you only have one or two styles to adjust, downside is that you won't be able to adjust multiple CSS properties from a single prop.
or
You can still use the :global selector but just add a specific ref to the element being styled in the child like so:
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested ref="green"/>
<style>
:global([ref=green]) {
background: green;
color: white;
padding: 5px;
border-radius: .5rem;
}
</style>
<!-- in Nested.svelte -->
<script>
export let ref;
</script>
<p {ref}>
Yes this will work also
</p>
This ensures global only affects the exact ref element inside the child it's intended for and not any other classes or native elements. You can see it in action at this REPL link
The only way I can think of is with an additional div element.
App.svelte
<script>
import Nested from './Nested.svelte'
</script>
<style>
div :global(.style-in-parent) {
color: green;
}
</style>
<div>
<Nested />
</div>
Nested.svelte
<div class="style-in-parent">
Colored based on parent style
</div>
Multiple Nested elements
You could even allow the class name to be dynamic and allow for different colors if you use multiple Nested components. Here's a link to a working example.
You could use inline styles and $$props...
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested style="background: green; color: white; padding: 10px; text-align: center; font-weight: bold" />
<!-- in Nested.svelte -->
<script>
let stylish=$$props.style
</script>
<div style={stylish}>
Hello World
</div>
REPL
using :global(*) is the simplest solution.
No need to specify a class in the child if you want to style all immediate children for example
In the parent component:
<style>
div > :global(*) {
color: blue;
}
<style>
<div>
<Nested />
<div>
Nested will be blue.
I take a look and found nothing relevant (maybe here), so here is an alternative by adding <div> around your custom component.
<style>
.Nested {
color: blue;
}
</style>
<div class="Nested">
<Nested />
</div>
Maybe you will found something but this one works.
The way I do it is like this:
<style lang="stylus">
section
// section styles
:global(img)
// image styles
</style>
This generates css selectors like section.svelte-15ht3eh img that only affects the children img tag of the section tag.
No classes or tricks involved there.
Related
I am doing something like StackOverflow editor. Fetch markdown text, transfer it to HTML, and inject it into the preview area. But when I tried to apply CSS to the injected HTML elements, it was ignored. In browser inspection, I can not find the stylesheet I write for the elements. I guess this is about the order of CSS rendering. Any suggestion will be appreciated.
<template>
<div>
<div class="item">
<label for="content">Contents</label>
<textarea name="content" id="content" v-model="mdtext"></textarea>
</div>
<div id="preview"></div>
</div>
</template>
<script>
import marked from 'marked'
export default {
data () {
return {
mdtext: ''
}
},
watch: {
mdtext: function () {
document.getElementById('preview').innerHTML = marked(this.mdtext)
}
}
}
</script>
<style scoped>
...
#preview p{
width: 100%;
word-break: break-all;
word-wrap: break-word;
}
...
</style>
You're using scoped css, which makes Vue add that data-v- attribute to the p as well. However, the generated <p> doesn't not have that same data-v- attribute, which is why it's not working.
You can easily fix it by using the deep selector:
<style scoped>
#preview >>> p {
}
</style>
Reference: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Svelte added support for passing CSS custom properties to a component in 3.38.0
Which allows us to pass a css property like shown below.
<Drawer --test1="red">
Technically it makes a div like this around your component code:
<div style="display: contents; --test: red;">
What I would like to do is to pass multiple without having to define them like --test-1="X" --test-2="Z" etc.
I would like to place them in an object:
let test = {
'--test-1': "X",
'--test-2': "Z"
};
And let the keys be rendered with there values.
The question is, is there a way to achieve this?
Link to REPL with a way to do this would be great.
Kind regards,
Tom
I don't think that is currently possible. It would be useful, so you should open a feature request.
In the meantime, you can solve this yourself with a custom wrapper component. See this REPL (relevant code below).
<!-- App.svelte -->
<script>
import Example from './Example.svelte';
import CustomPropWrapper from './CustomPropWrapper.svelte';
const customProps = {
'--first-color': 'red',
'--second-color': 'green'
}
</script>
<!-- longhand way -->
<Example --first-color={firstColor} --second-color={secondColor}></Example>
<!-- pass as an object using a wrapper -->
<CustomPropWrapper {customProps}>
<Example />
</CustomPropWrapper>
<!-- CustomPropWrapper.svelte -->
<script>
export let customProps = {};
// create an inline style string
$: style = Object.entries(customProps).reduce((acc, [key, value]) => `${acc}; ${key}: ${value}`, '');
</script>
<div {style}>
<slot />
</div>
<style>
div {
display: contents;
}
</style>
<!-- Example.svelte -->
<p class="first">
I'm the first paragraph
</p>
<p class="second">
I'm the second paragraph
</p>
<style>
.first {
color: var(--first-color);
}
.second {
color: var(--second-color);
}
</style>
I am using lit html to create custom web components in my project. And my problem is when I try to use the CSS target selector in a web component it wont get triggered, but when I am doing it without custom component the code works perfectly. Could someone shed some light to why this is happening and to what would be the workaround for this problem? Here is my code:
target-test-element.js:
import { LitElement, html} from '#polymer/lit-element';
class TargetTest extends LitElement {
render(){
return html`
<link rel="stylesheet" href="target-test-element.css">
<div class="target-test" id="target-test">
<p>Hello from test</p>
</div>
`;
}
}
customElements.define('target-test-element', TargetTest);
with the following style:
target-test-element.css:
.target-test{
background: yellow;
}
.target-test:target {
background: blue;
}
and I created a link in the index.html:
index.html(with custom component):
<!DOCTYPE html>
<head>
...
</head>
<body>
<target-test-element></target-test-element>
Link
</body>
</html>
And here is the working one:
index.html(without custom component)
<!DOCTYPE html>
<head>
...
</head>
<body>
Link
<div class="target-test" id="target-test">
Hello
</div>
</body>
</html>
LitElement uses a Shadow DOM to render its content.
Shadow DOM isolates the CSS style defined inside and prevent selecting inner content from the outide with CSS selectors.
For that reason, the :target pseudo-class won't work.
Instead, you could use a standard (vanilla) custom element instead of the LitElement.
With no Shadow DOM:
class TargetTest extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<div>
<span class="test" id="target-test">Hello from test</span>
</div>`
}
}
customElements.define('target-test-element', TargetTest)
.test { background: yellow }
.test:target { background: blue }
<target-test-element></target-test-element>
Link
Alternately, if you still want to use a Shadow DOM, you should then set the id property to the custom element itself. That supposes there's only one target in the custom element.
class TargetTest extends HTMLElement {
connectedCallback() {
this.attachShadow( { mode: 'open' } ).innerHTML = `
<style>
:host( :target ) .test { background-color: lightgreen }
</style>
<div>
<span class="test">Hello from test</span>
</div>`
}
}
customElements.define('target-test-element', TargetTest)
<target-test-element id="target-test"></target-test-element>
Link
Bit in late, i've experienced the same problem! So i'm following one of two paths:
Use a lit element but without the shadowDOM, to do that in your Lit element call the method createRenderRoot()
createRenderRoot () {
return this
}
Instead handle the CSS logic with :target i'm handling the attribute on the element (easy to do with Lit) eg. active and use it in CSS:
element[active] {
/* CSS rules */
}
These are my solutions for the moment! Hope it's help...
I want to separate the styles in a Vue.js component in modules.
Each style module will have far more than just a class, and new classes will be added regularly. So, it will be hard to change the entire component's template. So, I'm looking for a more practical solution.
I came with the idea of, using a v-if in the styles, but not exactly sure how it should be implemented or if such thing is possible after all.
It will be way more practical, if just depending on the name sent with props, the entire styles changes.
<template>
<div class="color-text">
Text in the color of the class with just the name
</div>
</template>
<script>
export default {
name: 'comp',
props: ['name']
}
</script>
<!-- General styles -->
<style scoped>
div{
float: right;
}
</style>
<!-- red styles -->
<style module v-if="name === 'red'">
.color-text{
color: red;
}
</style>
<!-- blue styles -->
<style module v-if="name === 'blue'">
.color-text{
color: blue;
}
</style>
<!-- green styles -->
<style module v-if="name === 'green'">
.color-text{
color: green;
}
</style>
If I was tackling this I'd use a transitive class value. and not worry about props at all.
<template>
<div class="color-text">
Text in the color of the class with just the name
</div>
</template>
<script>
export default {
name: 'comp'
}
</script>
<!-- General styles -->
<style scoped>
div{
float: right;
}
.red .color-text{
color: red;
}
.blue .color-text{
color: blue;
}
.green .color-text{
color: green;
}
</style>
then you can use the class property to pass in your color type
<div id="app">
<comp class="red"></comp>
<comp class="green"></comp>
<comp class="blue"></comp>
</div>
I've put together an example jsfiddle though it may need some tweaking when it comes to scoped styles and how webpack handles the injection
I'm trying to use the slot API in this example:
<tabs-s>
<tab-c>
<tab-c>
</tabs>
where tabs-s is the component that wraps other components.Inside it I'm using the tag to render its dom but if I want the assigned nodes I also get the whitespaces (text nodes).
Is there a manner to avoid getting the text nodes when calling assignedNodes() method? This was not happening in Polymer 1.x
Thanks
Let say you want to create a featured section to present new items
the section needs to have some basic information and change colors.
The element will take the title, count and class from his parent
<featured-section class="blue">
<span slot="count">3</span>
<h1 slot="title">The title of the element go here</h1>
</featured-section>
Inside the element featured-section
<dom-module id="featured-section">
<template>
<section>
<div class="vertical-section-container">
<div class="circle-container">
<div class="circle">
<slot name="count"></slot>
</div>
</div>
<slot name="title"></slot>
<feature-box></feature-box>
<feature-grid></feature-grid>
</div>
</section>
</template>
But who is in charge of the class detail? The element itself featured-section
<custom-style>
<style include="shared-styles">
:host {
display: block;
background-color: var(--my-section-color);
}
:host(.blue) {
--my-section-color: #03A9F4;
}
:host(.green) {
--my-section-color: #8BC34A;
}
:host(.pink) {
--my-section-color: #FF6EB6;
}
::slotted(h1) {
color: #fff;
padding-bottom: 1.5em;
line-height: 48px;
}
</style>
</custom-style>