The
i-HTML fetches a requested HTML resource and replaces the element's inner contents with the parsed content of the response. It's similar to an <iframe> but adopts the HTML into the page.
Key functionalities and features of <i-html> include:
Basic Usage: The
<i-html>tag is placed as an empty container, and when thesrc=attribute changes, it fetches the HTML and updates the content.Targeting with Links: Like iframes,
<i-html>respects thetarget=attribute on links, so a link with atargetthat matches theidof an<i-html>element will load the link'shrefinto the element.Targeting with Forms: Similarly,
<i-html>respectstarget=attributes on forms, allowing forms to submit to an<i-html>element and load new content. Forms can also be wrapped in<i-html>elements to create "AJAX-style" forms. Theformaction=attribute of buttons is also supported.Content Selection: By default,
<i-html>injects the<body>element's content but this can be customized with thetarget=attribute, which uses aquerySelectorto select specific content.Refetching: Content can be refetched by clicking a link or by using a
<button command="--load">element. TheRefreshheader or<meta http-equiv=refresh>tag in the response can also trigger a refresh.Content Negotiation: The
accept=attribute allows customization of theAcceptheader in the request, limited totext/plain,text/html,image/svg+xml, andapplication/xml. Invalid MIME types default totext/html.Streaming: With
accept="text/event-stream",<i-html>usesEventSourceto listen for Server-Side Events, allowing for multiple content updates with a single request.Insertion Modes: Content can be appended (
insert="append") or prepended (insert="prepend") to existing content instead of replacing it.Deferring Loading: The
loading=attribute can be set tolazyto defer loading until the element is visible, or tononeto prevent loading until changed via JavaScript. A<button command="--load">can force loading regardless of theloadingattribute.Security:
<i-html>usesfetch()and adheres to CORS policies. By default, it only fetches same-origin URLs. Theallow="cross-origin"attribute allows cross-origin requests. Several elements, such as<iframe>,<script>, and<style>are sanitized out by default, unless specifically allowed with theallowattribute.Declarative Shadow DOM:
<i-html>supports declarative shadow DOM (DSD) if the browser supportsDocument.parseHTMLUnsafe. Older browsers require a polyfill.Styling: The element has pseudo-classes (
:waiting,:loading,:loaded, and:error) for styling during different stages of its lifecycle, and uses attributes like[state-waiting]in older browsers.Events:
<i-html>dispatches events such asloadstart,load,loadend,error,beforeinsert, andinsertedduring its lifecycle. Theloadstartevent can be used to customize the request or prevent loading. Thebeforeinsertevent can modify or prevent content insertion.
<i-html> aims to combine the best features of similar elements, like include-fragment, and offers more functionality than other options like htmx or htmz. It remains in the DOM and can refetch content, unlike <include-fragment> which replaces itself.
You may also be interested in ...
Plotly
CSSGram
