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
Circle.svelte
<script>
import Circle from './Circle.svelte';
</script>

<!-- this works fine with no style props -->
<svg viewbox='0 0 300 300'>
<Circle />
</svg>

<!-- adding a style prop adds a <div> inside the svg
and breaks rendering of the Circle -->
<svg viewbox='0 0 300 300'>
<Circle --circle-fill="blue" />
</svg>

<style>
svg {
border:1px solid black;
width: 300px;
}
</style>

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
/* App.svelte generated by Svelte v3.51.0 */
import {
SvelteComponent,
append,
append_styles,
attr,
create_component,
destroy_component,
detach,
init,
insert,
mount_component,
noop,
safe_not_equal,
set_style,
space,
svg_element,
transition_in,
transition_out
} from "svelte/internal";

import Circle from './Circle.svelte';

function add_css(target) {
append_styles(target, "svelte-1lbb31x", "svg.svelte-1lbb31x{border:1px solid black;width:300px}");
}

function create_fragment(ctx) {
let svg0;
let circle0;
let t;
let svg1;
let circle1;
let g;
let current;
circle0 = new Circle({});
result = svelte.compile(source, {
generate: ,
});
svg.svelte-1lbb31x{border:1px solid black;width:300px}
		
			
				
  • {
    • html: Fragment {...}
      • start: 59
      • end: 317
      • type: "Fragment"
      • children: [...] (9)
        • Text {...}
          • start: 57
          • end: 59
          • type: "Text"
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Comment {...}
          • start: 59
          • end: 103
          • type: "Comment"
          • data: " this works fine with no style props "
          • ignores: []
          }
        • Text {...}
          • start: 103
          • end: 104
          • type: "Text"
          • raw: "\n"
          • data: "\n"
          }
        • Element {...}
          • start: 104
          • end: 150
          • type: "Element"
          • name: "svg"
          • attributes: [...] (1)
            • Attribute {...}
              • start: 109
              • end: 130
              • type: "Attribute"
              • name: "viewbox"
              • value: [...] (1)
                • Text {...}
                  • start: 118
                  • end: 129
                  • type: "Text"
                  • raw: "0 0 300 300"
                  • data: "0 0 300 300"
                  }
                ]
              }
            ]
          • children: [...] (3)
            • Text {...}
              • start: 131
              • end: 133
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • InlineComponent {...}
              • start: 133
              • end: 143
              • type: "InlineComponent"
              • name: "Circle"
              • attributes: []
              • children: []
              }
            • Text {...}
              • start: 143
              • end: 144
              • type: "Text"
              • raw: "\n"
              • data: "\n"
              }
            ]
          }
        • Text {...}
          • start: 150
          • end: 152
          • type: "Text"
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Comment {...}
          • start: 152
          • end: 249
          • type: "Comment"
          • data: " adding a style prop adds a <div> inside the svg\n and breaks rendering of the Circle "
          • ignores: []
          }
        • Text {...}
          • start: 249
          • end: 250
          • type: "Text"
          • raw: "\n"
          • data: "\n"
          }
        • Element {...}
          • start: 250
          • end: 317
          • type: "Element"
          • name: "svg"
          • attributes: [...] (1)
            • Attribute {...}
              • start: 255
              • end: 276
              • type: "Attribute"
              • name: "viewbox"
              • value: [...] (1)
                • Text {...}
                  • start: 264
                  • end: 275
                  • type: "Text"
                  • raw: "0 0 300 300"
                  • data: "0 0 300 300"
                  }
                ]
              }
            ]
          • children: [...] (3)
            • Text {...}
              • start: 277
              • end: 279
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • InlineComponent {...}
              • start: 279
              • end: 310
              • type: "InlineComponent"
              • name: "Circle"
              • attributes: [...] (1)
                • Attribute {...}
                  • start: 287
                  • end: 307
                  • type: "Attribute"
                  • name: "--circle-fill"
                  • value: [...] (1)
                    • Text {...}
                      • start: 302
                      • end: 306
                      • type: "Text"
                      • raw: "blue"
                      • data: "blue"
                      }
                    ]
                  }
                ]
              • children: []
              }
            • Text {...}
              • start: 310
              • end: 311
              • type: "Text"
              • raw: "\n"
              • data: "\n"
              }
            ]
          }
        • Text {...}
          • start: 317
          • end: 319
          • type: "Text"
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • css: Style {...}
      • type: "Style"
      • start: 319
      • end: 387
      • attributes: []
      • children: [...] (1)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • children: [...] (1)
              • Selector {...}
                • type: "Selector"
                • children: [...] (1)
                  • TypeSelector {...}
                    • type: "TypeSelector"
                    • name: "svg"
                    • start: 328
                    • end: 331
                    }
                  ]
                • start: 328
                • end: 331
                }
              ]
            • start: 328
            • end: 331
            }
          • block: Block {...}
            • type: "Block"
            • children: [...] (2)
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "border"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (5)
                    • Dimension {...}
                      • type: "Dimension"
                      • value: "1"
                      • unit: "px"
                      • start: 343
                      • end: 346
                      }
                    • WhiteSpace {...}
                      • type: "WhiteSpace"
                      • loc: null
                      • value: " "
                      }
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "solid"
                      • start: 347
                      • end: 352
                      }
                    • WhiteSpace {...}
                      • type: "WhiteSpace"
                      • loc: null
                      • value: " "
                      }
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "black"
                      • start: 353
                      • end: 358
                      }
                    ]
                  • start: 343
                  • end: 358
                  }
                • start: 336
                • end: 358
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "width"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Dimension {...}
                      • type: "Dimension"
                      • value: "300"
                      • unit: "px"
                      • start: 369
                      • end: 374
                      }
                    ]
                  • start: 369
                  • end: 374
                  }
                • start: 362
                • end: 374
                }
              ]
            • start: 332
            • end: 378
            }
          • start: 328
          • end: 378
          }
        ]
      • content: {...}
        • start: 326
        • end: 379
        • styles: "\n\tsvg {\n\t\tborder:1px solid black;\n\t\twidth: 300px;\n\t}\n"
        }
      }
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 57
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 48
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 3
            • column: 0
            }
          }
        • body: [...] (1)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 47
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 38
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 17
                • end: 23
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 8
                    }
                  • end: {...}
                    • line: 2
                    • column: 14
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 17
                  • end: 23
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 8
                      }
                    • end: {...}
                      • line: 2
                      • column: 14
                      }
                    }
                  • name: "Circle"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 29
              • end: 46
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 20
                  }
                • end: {...}
                  • line: 2
                  • column: 37
                  }
                }
              • value: "./Circle.svelte"
              • raw: "'./Circle.svelte'"
              }
            }
          ]
        • sourceType: "module"
        }
      }
    • module: undefined
    }
The AST is not public API and may change at any point in time