As an example HN here on might structure things like this:
<script src="./hn-components.js"></script>
<hn-header></hn-header>
... all the main body content ...
<hn-footer></hn-footer>
To answer your direct question, the WC equivalent of <include> is the <script> tag. The <script> loads the component definition and all the resources related to them (See ZephJS for how this is super easy to do: https://gist.github.com/arei/8083a6270e704b830c68a2020f3e5e3...)
<hn-header> and <hn-footer> are defined in the script. They carry with them all the content, layout, and behavior for those parts of the site. This provides a nice clean separation between the page and the header and footer pieces. Changing the header or footer becomes just changing those parts. This is absolutely easier then using react or angular for the equivalent kind of things. Does it provide all that react/angular does, of course not. But it is infinitely cleaner then using either. Especially with ZephJS (gratuitous plug).
the WC equivalent of <include> is the <script> tag
I beg to differ. My <include src="footer.html"> would insert the html in the footer.html file. While <script src="components.js"></script> will execute javascript. Then the javascript has to somehow prepare magic so that <hn-footer> will be replaced by some html.
The link to the library you gave does not help here. Because I am thinking about browser technology here. What has to go into components.js (without using a library) to make <hn-footer> be replaced with the html in footer.html?
<script src="./hn-components.js"></script> <hn-header></hn-header> ... all the main body content ... <hn-footer></hn-footer>
To answer your direct question, the WC equivalent of <include> is the <script> tag. The <script> loads the component definition and all the resources related to them (See ZephJS for how this is super easy to do: https://gist.github.com/arei/8083a6270e704b830c68a2020f3e5e3...)
<hn-header> and <hn-footer> are defined in the script. They carry with them all the content, layout, and behavior for those parts of the site. This provides a nice clean separation between the page and the header and footer pieces. Changing the header or footer becomes just changing those parts. This is absolutely easier then using react or angular for the equivalent kind of things. Does it provide all that react/angular does, of course not. But it is infinitely cleaner then using either. Especially with ZephJS (gratuitous plug).