Search code examples
javascripthtmlencapsulationhtml-imports

Do HTML imports provide any form of Javascript encapsulation?


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>

Solution

  • No. However, wrapping everything in a function or having a global object that you store all your variables in inside import.html would work.