Html tag is not displaying the content as expected

Here is how the html page actually should look like:
https://i.imgur.com/qTyKHSI.png

But when I add the content from the html page :

ClassLoader classLoader = getClass().getClassLoader();
        InputStream inputStream = classLoader.getResourceAsStream("football.html");
        String contentString = new String(inputStream.readAllBytes(),StandardCharset.UTF_8); 
Html content = new Html("<div>"+contentString+"</div>");
add(content);

It is displaying like this (no data which is not desired):
https://i.imgur.com/Wdwrk3I.png

I checked the browser console and there are no errors found.

How do I load it from Vaadin like in first screenshot?

Why would you expect that embedding a full html page with head and body would work? Can you do it in normal html? If you wanna do something like this you need an iframe.

I had to create a separate html file, host it in Github pages and then added it into an iframe to solve the issue.

just following the Html content = new Html("<div>"+contentString+"</div>"); and then added all scripts/headers/meta tags through appshell configurator. So, it should have worked. But it is not working which is weird and very annoying. But I’m okay with the above mentioned workaround for now.