I've just read about the use of HTML imports for component encapsulation.
<link rel=import href="import.html">
The file import.html
would include everything that's needed for the component.
One big problem, though: Javascript functions and variables inside import.html
become part of the window
namespace, which means there's no encapsulation whatsoever.
Two different components which happen to have a function with the same name will collide and one of the functions will be overridden.
Do HTML imports provide any form of javascript encapsulation that didn't exist before?
Example:
main.html
<link rel=import href="import1.html">
<link rel=import href="import2.html">
<script>
console.log( moduleFunction() ) ; //`moduleFunction` can be called as if it was defined in the outter document
</script>
import1.html
<script>
function moduleFunction(){
return 'module1' ;
}
</script>
import2.html
<script>
function moduleFunction(){
return 'module2' ;
}
</script>
No. However, wrapping everything in a function or having a global object that you store all your variables in inside import.html
would work.