O'Reilly logo

Developing Web Components by Jason Strimpel, Jarrod Overson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 13. Importing Code

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required