Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: sebastiandedeyne.com
Embed a web page with a web component and the shadow DOMCategory: api, api
Today, my colleague Freek asked for help embedding the webview of an email campaign in an iframe. He needed it in an iframe because embedding the HTML directly caused layout issues because the website’s CSS clashed with it.
We’re going to build an embedded-webview component with an html attribute that contains a full (escaped HTML) webpage.
Finally, we enable the shadow DOM with attachShadow and dump the HTML we want to embed in the shadow root. For more shadow DOM shananigans, we could take this further and have it pull in an external HTML page with the fetch API.
We’re going to build an embedded-webview component with an html attribute that contains a full (escaped HTML) webpage.
Finally, we enable the shadow DOM with attachShadow and dump the HTML we want to embed in the shadow root. For more shadow DOM shananigans, we could take this further and have it pull in an external HTML page with the fetch API.
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers