Dynamically styling slotted elements using css variables • Playground • Svelte

App.svelte

ThemeProvider.svelte

List.svelte

ListItem.svelte

import ThemeProvider from "./ThemeProvider.svelte";

import List from "./List.svelte";

</script>

<style>

h2 {

color: var(--text-color);

}

</style>

<h2>

I am a slotted title

</h2>

<List/>

</ThemeProvider>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import ThemeProvider from "./ThemeProvider.svelte";

import List from "./List.svelte";

var root_1 = $.template(`<h2 class="svelte-1asjiy4">I am a slotted title</h2> <!>`, 1);

export default function App($$anchor) {

ThemeProvider($$anchor, {

children: ($$anchor, $$slotProps) => {

var fragment_1 = root_1();

var node = $.sibling($.first_child(fragment_1), 2);

List(node, {});

$.append($$anchor, fragment_1);

$$slots: { default: true }

});

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

h2.svelte-1asjiy4 {

color: var(--text-color);

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 107
end: 160
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 116
end: 118
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 116
end: 118
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "h2"
start: 116
end: 118
 }
 ]
start: 116
end: 118
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 119
end: 151
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 123
end: 147
property: "color"
value: "var(--text-color)"
 }
 ]
 }
start: 116
end: 151
 }
 ]
content:  {...}
 start: 114
end: 152
styles: "\n\th2 {\n\t\tcolor: var(--text-color);\n\t}\n"
comment: null
 }
 }
js: []
start: 107
end: 238
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 106
end: 107
raw: "\n"
data: "\n"
 }
 Text {...}
 type: "Text"
start: 160
end: 161
raw: "\n"
data: "\n"
 }
 Component {...}
 type: "Component"
start: 161
end: 238
name: "ThemeProvider"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 176
end: 178
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 178
end: 212
name: "h2"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 182
end: 207
raw: "I am a slotted title"
data: "I am a slotted title"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 212
end: 214
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 214
end: 221
name: "List"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 221
end: 222
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 106
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 97
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 4
column: 0
 }
 }
body: [...] (2)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 61
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 52
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 17
end: 30
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 21
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 17
end: 30
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 21
 }
 }
name: "ThemeProvider"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 36
end: 60
loc:  {...}
 start:  {...}
 line: 2
column: 27
 }
end:  {...}
 line: 2
column: 51
 }
 }
value: "./ThemeProvider.svelte"
raw: "\"./ThemeProvider.svelte\""
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 63
end: 96
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 34
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 70
end: 74
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 12
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 70
end: 74
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 12
 }
 }
name: "List"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 80
end: 95
loc:  {...}
 start:  {...}
 line: 3
column: 18
 }
end:  {...}
 line: 3
column: 33
 }
 }
value: "./List.svelte"
raw: "\"./List.svelte\""
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern