Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
function action(node) {
node.classList.add('green'); // class is added dynamically
}
</script>

<p use:action>text</p>

<style>
p:global(.green) {
/* this will apply to all <p> elements belonging to this
component with a class of red, even if class="red" does
not appear in the markup. This is useful when the class
of the element is dynamically applied, for instance
when updating the element's classList property directly. */
color: green;
}
</style>

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
/* App.svelte generated by Svelte v3.38.0 */
import {
SvelteComponent,
action_destroyer,
append,
attr,
detach,
element,
init,
insert,
noop,
safe_not_equal
} from "svelte/internal";

function add_css() {
var style = element("style");
style.id = "svelte-1qez3qt-style";
style.textContent = "p.svelte-1qez3qt.green{color:green}";
append(document.head, style);
}

function create_fragment(ctx) {
let p;
let action_action;
let mounted;
let dispose;

return {
c() {
p = element("p");
p.textContent = "text";
attr(p, "class", "svelte-1qez3qt");
},
m(target, anchor) {
insert(target, p, anchor);

result = svelte.compile(source, {
generate: ,
});
p.svelte-1qez3qt.green{color:green}
		
			
				
  • {
    • html: Fragment {...}
      • start: 111
      • end: 133
      • type: "Fragment"
      • children: [...] (3)
        • Text {...}
          • start: 109
          • end: 111
          • type: "Text"
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Element {...}
          • start: 111
          • end: 133
          • type: "Element"
          • name: "p"
          • attributes: [...] (1)
            • Action {...}
              • start: 114
              • end: 124
              • type: "Action"
              • name: "action"
              • modifiers: []
              • expression: null
              }
            ]
          • children: [...] (1)
            • Text {...}
              • start: 125
              • end: 129
              • type: "Text"
              • raw: "text"
              • data: "text"
              }
            ]
          }
        • Text {...}
          • start: 133
          • end: 135
          • type: "Text"
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • css: Style {...}
      • type: "Style"
      • start: 135
      • end: 505
      • attributes: []
      • children: [...] (1)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • children: [...] (1)
              • Selector {...}
                • type: "Selector"
                • children: [...] (2)
                  • TypeSelector {...}
                    • type: "TypeSelector"
                    • name: "p"
                    • start: 146
                    • end: 147
                    }
                  • PseudoClassSelector {...}
                    • type: "PseudoClassSelector"
                    • name: "global"
                    • children: [...] (1)
                      • Raw {...}
                        • type: "Raw"
                        • value: ".green"
                        • start: 155
                        • end: 161
                        }
                      ]
                    • start: 147
                    • end: 162
                    }
                  ]
                • start: 146
                • end: 162
                }
              ]
            • start: 146
            • end: 162
            }
          • block: Block {...}
            • type: "Block"
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "color"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "green"
                      • start: 485
                      • end: 490
                      }
                    ]
                  • start: 485
                  • end: 490
                  }
                • start: 478
                • end: 490
                }
              ]
            • start: 163
            • end: 496
            }
          • start: 146
          • end: 496
          }
        ]
      • content: {...}
        • start: 142
        • end: 497
        • styles: "\n p:global(.green) {\n\t\t /* this will apply to all <p> elements belonging to this \n\t\t\t\t component with a class of red, even if class=\"red\" does\n\t\t\t\t not appear in the markup. This is useful when the class \n\t\t\t\t of the element is dynamically applied, for instance \n\t\t\t\t when updating the element's classList property directly. */\n color: green;\n }\n"
        }
      }
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 109
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 100
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 5
            • column: 0
            }
          }
        • body: [...] (1)
          • FunctionDeclaration {...}
            • type: "FunctionDeclaration"
            • start: 11
            • end: 99
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 2
                }
              • end: {...}
                • line: 4
                • column: 3
                }
              }
            • id: Identifier {...}
              • type: "Identifier"
              • start: 20
              • end: 26
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 11
                  }
                • end: {...}
                  • line: 2
                  • column: 17
                  }
                }
              • name: "action"
              }
            • expression: false
            • generator: false
            • async: false
            • params: [...] (1)
              • Identifier {...}
                • type: "Identifier"
                • start: 27
                • end: 31
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 18
                    }
                  • end: {...}
                    • line: 2
                    • column: 22
                    }
                  }
                • name: "node"
                }
              ]
            • body: BlockStatement {...}
              • type: "BlockStatement"
              • start: 33
              • end: 99
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 24
                  }
                • end: {...}
                  • line: 4
                  • column: 3
                  }
                }
              • body: [...] (1)
                • ExpressionStatement {...}
                  • type: "ExpressionStatement"
                  • start: 37
                  • end: 65
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 2
                      }
                    • end: {...}
                      • line: 3
                      • column: 30
                      }
                    }
                  • expression: CallExpression {...}
                    • type: "CallExpression"
                    • start: 37
                    • end: 64
                    • loc: {...}
                      • start: {...}
                        • line: 3
                        • column: 2
                        }
                      • end: {...}
                        • line: 3
                        • column: 29
                        }
                      }
                    • callee: MemberExpression {...}
                      • type: "MemberExpression"
                      • start: 37
                      • end: 55
                      • loc: {...}
                        • start: {...}
                          • line: 3
                          • column: 2
                          }
                        • end: {...}
                          • line: 3
                          • column: 20
                          }
                        }
                      • object: MemberExpression {...}
                        • type: "MemberExpression"
                        • start: 37
                        • end: 51
                        • loc: {...}
                          • start: {...}
                            • line: 3
                            • column: 2
                            }
                          • end: {...}
                            • line: 3
                            • column: 16
                            }
                          }
                        • object: Identifier {...}
                          • type: "Identifier"
                          • start: 37
                          • end: 41
                          • loc: {...}
                            • start: {...}
                              • line: 3
                              • column: 2
                              }
                            • end: {...}
                              • line: 3
                              • column: 6
                              }
                            }
                          • name: "node"
                          }
                        • property: Identifier {...}
                          • type: "Identifier"
                          • start: 42
                          • end: 51
                          • loc: {...}
                            • start: {...}
                              • line: 3
                              • column: 7
                              }
                            • end: {...}
                              • line: 3
                              • column: 16
                              }
                            }
                          • name: "classList"
                          }
                        • computed: false
                        • optional: false
                        }
                      • property: Identifier {...}
                        • type: "Identifier"
                        • start: 52
                        • end: 55
                        • loc: {...}
                          • start: {...}
                            • line: 3
                            • column: 17
                            }
                          • end: {...}
                            • line: 3
                            • column: 20
                            }
                          }
                        • name: "add"
                        }
                      • computed: false
                      • optional: false
                      }
                    • arguments: [...] (1)
                      • Literal {...}
                        • type: "Literal"
                        • start: 56
                        • end: 63
                        • loc: {...}
                          • start: {...}
                            • line: 3
                            • column: 21
                            }
                          • end: {...}
                            • line: 3
                            • column: 28
                            }
                          }
                        • value: "green"
                        • raw: "'green'"
                        }
                      ]
                    • optional: false
                    }
                  • trailingComments: [...] (1)
                    • Line {...}
                      • type: "Line"
                      • value: " class is added dynamically"
                      • start: 66
                      • end: 95
                      }
                    ]
                  }
                ]
              }
            }
          ]
        • sourceType: "module"
        }
      }
    • module: undefined
    }
The AST is not public API and may change at any point in time