LadybirdBrowser / ladybird

Truly independent web browser
https://ladybird.org
BSD 2-Clause "Simplified" License
19.99k stars 827 forks source link

LibWeb: Implement (most of) declarative shadow DOM #278

Closed awesomekling closed 3 months ago

awesomekling commented 3 months ago

This PR adds the ability to create shadow DOM trees in pure HTML, without a single line of JavaScript.

<div>
<template shadowrootmode="open">
this becomes the shadow tree inside the div element!
</template>
this text is a normal child of the div element.
</div>

This required updating a bunch of algorithms in the HTML parser & serializer, the DOM node cloning algorithm (which can now throw!), and more.

I ended up doing all this because the extension I'm using to save full pages as a single HTML file in Firefox (for debugging with Ladybird) started outputting HTML files with declarative shadow DOMs! :sweat_smile:

This passes a lot of the WPT tests, but then a lot of them fail because we don't yet have Element.setHTMLUnsafe(). That'll be an exercise for another day!