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
<style>
details {
background-color: black;
color: lightgreen;
}
summary {
cursor: pointer;
}
summary:hover {
color:white;
}
details[open]>summary {
/* text should turn pink */
color: pink;
}
</style>

<details>
<summary>Item 1</summary>
<p>
Details go here
</p>
</details>
<details>
<summary>Item 2</summary>
<p>
Details go here
</p>
</details>

Error compiling component

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

function add_css() {
var style = element("style");
style.id = "svelte-v4ycxa-style";
style.textContent = "details.svelte-v4ycxa.svelte-v4ycxa{background-color:black;color:lightgreen}summary.svelte-v4ycxa.svelte-v4ycxa{cursor:pointer}summary.svelte-v4ycxa.svelte-v4ycxa:hover{color:white}details[open].svelte-v4ycxa>summary.svelte-v4ycxa{color:pink}";
append(document.head, style);
}

function create_fragment(ctx) {
let details0;
let t3;
let details1;
let t7;
let details2;

return {
c() {
details0 = element("details");

details0.innerHTML = `<summary class="svelte-v4ycxa">Item 1</summary>
<p>Details go here</p>`;

t3 = space();
result = svelte.compile(source, {
generate: ,
});
details.svelte-v4ycxa.svelte-v4ycxa{background-color:black;color:lightgreen}summary.svelte-v4ycxa.svelte-v4ycxa{cursor:pointer}summary.svelte-v4ycxa.svelte-v4ycxa:hover{color:white}details[open].svelte-v4ycxa>summary.svelte-v4ycxa{color:pink}
		
			
				
  • {
    • html: Fragment {...}
      • start: 237
      • end: 467
      • type: "Fragment"
      • children: [...] (6)
        • Text {...}
          • start: 235
          • end: 237
          • type: "Text"
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Element {...}
          • start: 237
          • end: 313
          • type: "Element"
          • name: "details"
          • attributes: []
          • children: [...] (5)
            • Text {...}
              • start: 246
              • end: 248
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • Element {...}
              • start: 248
              • end: 273
              • type: "Element"
              • name: "summary"
              • attributes: []
              • children: [...] (1)
                • Text {...}
                  • start: 257
                  • end: 263
                  • type: "Text"
                  • raw: "Item 1"
                  • data: "Item 1"
                  }
                ]
              }
            • Text {...}
              • start: 273
              • end: 275
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • Element {...}
              • start: 275
              • end: 302
              • type: "Element"
              • name: "p"
              • attributes: []
              • children: [...] (1)
                • Text {...}
                  • start: 278
                  • end: 298
                  • type: "Text"
                  • raw: "\n\t\tDetails go here\n\t"
                  • data: "\n\t\tDetails go here\n\t"
                  }
                ]
              }
            • Text {...}
              • start: 302
              • end: 303
              • type: "Text"
              • raw: "\n"
              • data: "\n"
              }
            ]
          }
        • Text {...}
          • start: 313
          • end: 314
          • type: "Text"
          • raw: "\n"
          • data: "\n"
          }
        • Element {...}
          • start: 314
          • end: 390
          • type: "Element"
          • name: "details"
          • attributes: []
          • children: [...] (5)
            • Text {...}
              • start: 323
              • end: 325
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • Element {...}
              • start: 325
              • end: 350
              • type: "Element"
              • name: "summary"
              • attributes: []
              • children: [...] (1)
                • Text {...}
                  • start: 334
                  • end: 340
                  • type: "Text"
                  • raw: "Item 2"
                  • data: "Item 2"
                  }
                ]
              }
            • Text {...}
              • start: 350
              • end: 352
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • Element {...}
              • start: 352
              • end: 379
              • type: "Element"
              • name: "p"
              • attributes: []
              • children: [...] (1)
                • Text {...}
                  • start: 355
                  • end: 375
                  • type: "Text"
                  • raw: "\n\t\tDetails go here\n\t"
                  • data: "\n\t\tDetails go here\n\t"
                  }
                ]
              }
            • Text {...}
              • start: 379
              • end: 380
              • type: "Text"
              • raw: "\n"
              • data: "\n"
              }
            ]
          }
        • Text {...}
          • start: 390
          • end: 391
          • type: "Text"
          • raw: "\n"
          • data: "\n"
          }
        • Element {...}
          • start: 391
          • end: 467
          • type: "Element"
          • name: "details"
          • attributes: []
          • children: [...] (5)
            • Text {...}
              • start: 400
              • end: 402
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • Element {...}
              • start: 402
              • end: 427
              • type: "Element"
              • name: "summary"
              • attributes: []
              • children: [...] (1)
                • Text {...}
                  • start: 411
                  • end: 417
                  • type: "Text"
                  • raw: "Item 3"
                  • data: "Item 3"
                  }
                ]
              }
            • Text {...}
              • start: 427
              • end: 429
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • Element {...}
              • start: 429
              • end: 456
              • type: "Element"
              • name: "p"
              • attributes: []
              • children: [...] (1)
                • Text {...}
                  • start: 432
                  • end: 452
                  • type: "Text"
                  • raw: "\n\t\tDetails go here\n\t"
                  • data: "\n\t\tDetails go here\n\t"
                  }
                ]
              }
            • Text {...}
              • start: 456
              • end: 457
              • type: "Text"
              • raw: "\n"
              • data: "\n"
              }
            ]
          }
        ]
      }
    • css: Style {...}
      • type: "Style"
      • start: 0
      • end: 235
      • attributes: []
      • children: [...] (4)
        • Rule {...}
          • type: "Rule"
          • selector: SelectorList {...}
            • type: "SelectorList"
            • children: [...] (1)
              • Selector {...}
                • type: "Selector"
                • children: [...] (1)
                  • TypeSelector {...}
                    • type: "TypeSelector"
                    • name: "details"
                    • start: 11
                    • end: 18
                    }
                  ]
                • start: 11
                • end: 18
                }
              ]
            • start: 11
            • end: 18
            }
          • block: Block {...}
            • type: "Block"
            • children: [...] (2)
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "background-color"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "black"
                      • start: 41
                      • end: 46
                      }
                    ]
                  • start: 40
                  • end: 46
                  }
                • start: 23
                • end: 46
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "color"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "lightgreen"
                      • start: 57
                      • end: 67
                      }
                    ]
                  • start: 56
                  • end: 67
                  }
                • start: 50
                • end: 67
                }
              ]
            • start: 19
            • end: 71
            }
          • start: 11
          • end: 71
          }
        • Rule {...}
          • type: "Rule"
          • selector: SelectorList {...}
            • type: "SelectorList"
            • children: [...] (1)
              • Selector {...}
                • type: "Selector"
                • children: [...] (1)
                  • TypeSelector {...}
                    • type: "TypeSelector"
                    • name: "summary"
                    • start: 75
                    • end: 82
                    }
                  ]
                • start: 75
                • end: 82
                }
              ]
            • start: 75
            • end: 82
            }
          • block: Block {...}
            • type: "Block"
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "cursor"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "pointer"
                      • start: 95
                      • end: 102
                      }
                    ]
                  • start: 94
                  • end: 102
                  }
                • start: 87
                • end: 102
                }
              ]
            • start: 83
            • end: 109
            }
          • start: 75
          • end: 109
          }
        • Rule {...}
          • type: "Rule"
          • selector: SelectorList {...}
            • type: "SelectorList"
            • children: [...] (1)
              • Selector {...}
                • type: "Selector"
                • children: [...] (2)
                  • TypeSelector {...}
                    • type: "TypeSelector"
                    • name: "summary"
                    • start: 113
                    • end: 120
                    }
                  • PseudoClassSelector {...}
                    • type: "PseudoClassSelector"
                    • name: "hover"
                    • children: null
                    • start: 120
                    • end: 126
                    }
                  ]
                • start: 113
                • end: 126
                }
              ]
            • start: 113
            • end: 126
            }
          • block: Block {...}
            • type: "Block"
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "color"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "white"
                      • start: 137
                      • end: 142
                      }
                    ]
                  • start: 137
                  • end: 142
                  }
                • start: 131
                • end: 142
                }
              ]
            • start: 127
            • end: 146
            }
          • start: 113
          • end: 146
          }
        • Rule {...}
          • type: "Rule"
          • selector: SelectorList {...}
            • type: "SelectorList"
            • children: [...] (1)
              • Selector {...}
                • type: "Selector"
                • children: [...] (4)
                  • TypeSelector {...}
                    • type: "TypeSelector"
                    • name: "details"
                    • start: 152
                    • end: 159
                    }
                  • AttributeSelector {...}
                    • type: "AttributeSelector"
                    • name: Identifier {...}
                      • type: "Identifier"
                      • name: "open"
                      • start: 160
                      • end: 164
                      }
                    • matcher: null
                    • value: null
                    • flags: null
                    • start: 159
                    • end: 165
                    }
                  • Combinator {...}
                    • type: "Combinator"
                    • name: ">"
                    • start: 165
                    • end: 166
                    }
                  • TypeSelector {...}
                    • type: "TypeSelector"
                    • name: "summary"
                    • start: 166
                    • end: 173
                    }
                  ]
                • start: 152
                • end: 173
                }
              ]
            • start: 152
            • end: 173
            }
          • block: Block {...}
            • type: "Block"
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "color"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "pink"
                      • start: 216
                      • end: 220
                      }
                    ]
                  • start: 215
                  • end: 220
                  }
                • start: 209
                • end: 220
                }
              ]
            • start: 174
            • end: 224
            }
          • start: 152
          • end: 224
          }
        ]
      • content: {...}
        • start: 7
        • end: 227
        • styles: "\n\t\n\tdetails {\n\t\tbackground-color: black;\n\t\tcolor: lightgreen;\n\t}\n\t\n\tsummary {\n\t\tcursor: pointer;\n\t\t\n\t}\n\t\n\tsummary:hover {\n\t\tcolor:white;\n\t}\n\t\n\t\n\tdetails[open]>summary {\n\t\t/* text should turn pink */\n \t\tcolor: pink;\n\t}\n\t\n"
        }
      }
    • instance: undefined
    • module: undefined
    }
The AST is not public API and may change at any point in time