REPL itself is a component, `l-repl`.
To the right you will see source similar to that used to define the REPL in the tab menu for this website.
The REPL component has lots of configuration options, so you can use it to just display example code based on
source files if you want or focus users on a specific aspect of the code.
Try these steps to see the flexibility of `l-repl`:
1. Delete the entire slot and its contents starting with ` ... `. You should now
see a REPL with no content in each of the displayed areas.
2. Paste `src="./repl-as-src.html"` as one of the attributes of the `l-repl`. You should now see the same code you
saw to start with, except it is loaded from a file.
3. Paste `readonly` as an attribute to the `l-repl`. Now, none of the code can be edited. also, the `Save` button in the
frames section disappears. (You probably realized this by now, users can save their REPL edits to `IndexedDB` locally. Next time
they visit, the REPL will be in the same state it was left in ... unless it has been more than 10 days on IOS ... Apple
auto clears `IndexedDB for lack of use ;-(.).
4. Delete `readonly` from the `l-repl` (Ctrl-Z should work) and paste it as an attribute to "bodyhtml" slot. Now the body
can't be edited. You can do this with the other slots also.
5. Remove `previewpinned` so as not to distract the user with a preview unless it is requested.
5. Assume you want to focus the user attention of the body and script without editing. Remove the
slots "headhtml" and "css". Add "readonly" to the "script" slot, or the `l-repl`. Remove `previewheight`.
Add `hidetabs` to the `l-repl`.
One final note, if you want to use multiple script tags, then add `maintainbody` to the `l-repl` and your scripts will be
left alone, otherwise, the `l-repl` assumes you only have one script.