Developing Web Components

Chapter 13. Importing Code

Jason Strimpel

Practically every other application platform allows packaging and importing code, but the web platform does not. This makes it extremely difficult to share code in a common fashion across applications. In the absence of a standard import, many other creative solutions have been invented and adopted by developers. However, none of these solutions have holistically addressed the need to include CSS, JavaScript, HTML, images, etc. as a single resource. This is what imports promise to deliver.

Note

There are imports already, in the sense that there are <link> tags for CSS and <script> tags for JavaScript that work for including code. However, these do not scale well or allow developers to define complete resources in a standard way that works consistently.

Declaring an Import

Importing code is as simple as adding a <link> and setting the rel value to import:

<head>
    <link id="meeseeks-import" rel="import" href="/imports/meeseeks/index.html">
</head>

Imports can also be added to a document programmatically:

<head>
    <script type="text/javascript">
        var link = document.createElement('link');
        link.rel = 'import';
        link.id = 'meeseeks-import';
        link.href = '/imports/meeseeks/index.html';
        link.onload = function (e) {
            // do something with import
        };
        link.onerror = function (e) {
            // doh! something went wrong loading import
            // handle error accordingly
        };

        document.head.appendChild(link);
    </script>
</head>

Note

An import is only loaded and parsed once, based ...