Just an example of a custom HTML-element (web component) that renders an external webpage (newsletter), demonstrating the external content is not impacted by the CSS on the page itself.
Idea from: https://sebastiandedeyne.com/embed-a-web-page-with-a-web-component-and-the-shadow-dom/
| <html> | |
| <head> | |
| <title>Test</title> | |
| <script> | |
| window.customElements.define('external-webview', class ExternalWebview extends HTMLElement { | |
| connectedCallback() { | |
| const shadow = this.attachShadow({ mode: 'closed' }); | |
| shadow.innerHTML = this.getAttribute('contents'); | |
| // Interacting with the contents. | |
| shadow.querySelectorAll(".section")[0].style.border = "1px solid red"; | |
| shadow.querySelectorAll(".section")[0].onclick = function () { | |
| alert('test'); | |
| }; | |
| } | |
| }) | |
| </script> | |
| <style> | |
| p { | |
| font-size: 13px; | |
| font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; | |
| } | |
| h1 { | |
| font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; | |
| } | |
| body { | |
| background: #f9f9f9; | |
| font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; | |
| } | |
| .header { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>A heading</h1> | |
| <p>A paragraph.</p> | |
| </header> | |
| <external-webview contents="<?php echo htmlspecialchars(file_get_contents('https://storage.googleapis.com/gd-download/191218.html')); ?>"></external-webview> | |
| </body> | |
| </html> |