fix: javascript isn't interactive when ran in a jupyter notebook like environment

[dakshpokar]

Bug Report

Description

We are currently working on an open-source project and have encountered an issue where interactivity is lost when using the show() method of pyhtmltools within a Jupyter Notebook. As a temporary workaround, we have been using an iframe to maintain interactivity. However, we would like to formally report this issue to the posit-dev team for further investigation.

Steps to Reproduce

1. Create a ipython notebook and try to run the following example -

from htmltools import HTML, HTMLDocument, Tag, tags

js = """
document.addEventListener('DOMContentLoaded', function() {
    // Add an event listener to the button
    document.getElementById('fetchDataButton').addEventListener('click', function() {
        // Simulate fetching data (e.g., from an API)
        const data = [
            { name: 'Alice', age: 30 },
            { name: 'Bob', age: 25 },
            { name: 'Charlie', age: 35 }
        ];

        // Update the content of the 'test' div
        let content = '<ul>';
        data.forEach(function(person) {
            content += '<li>' + person.name + ' (Age: ' + person.age + ')</li>';
        });
        content += '</ul>';
        
        document.getElementById('test').innerHTML = content;
    });
});
"""

base_html = tags.html(
    tags.head(
        tags.meta(charset="UTF-8"),
    ),
    tags.body(
        tags.div(
            tags.h1("JavaScript Example"),
            tags.button("Fetch Data", id="fetchDataButton"),
            tags.div(id="test"),  # Element to be updated by JS
        ),
    ),
    tags.script(js),  # Include the complex JS script in the HTML
)

# Display the HTML
base_html.show()

3. Check if interactivity works.
4. Add a wrapper around base_html by doing following -

base_html = tags.iframe(srcdoc=str(base_html.get_html_string()))
base_html.show()