How deeply does Web Components in Action cover script element?

Demonstrates single and multiple references, production concatenation, and dependency reduction without explaining script execution timing.

Script element

As explained in Web Components in Action

An HTML element that embeds executable code or references an external script file for a document.

A script element loads JavaScript from an external file, keeping an HTML document easier to read and maintain as components grow. section 5.1

Use script elements to:

Load a Web Component such as a photo carousel with <script src="photocarousel.js"></script>. section 5.1
Add multiple component dependencies during development, then reduce production references by concatenating JavaScript into one build file. section 5.1
Move implementation code out of index.html while keeping component markup in the document body. section 5.1

Loading a photo carousel

Place <script src="photocarousel.js"></script> in the head, then use <wcia-photo-carousel> in the body with title, author, and photos attributes. The component can keep its CSS internally when eliminating a separate stylesheet reference. section 5.1

Listing 5.1. Example of loading Web Components with the `<script>` tag

<html>
<head>
   <meta charset="UTF-8">
   <title>Script Source for Loading Web Components</title>
   <script src="photocarousel.js"></script>                  #1
   <link href="photocarousel.css"
         rel="stylesheet"
         type="text/css"/>                                   #2
</head>
<body>
   <wcia-photo-carousel
           title="Future Vacation Photos"
           author="Ben Farrell"
           photos="https://i.imgur.com/fBmIASF.jpg,https://i.imgur.com/
           3zxD6rz.jpg,https://i.imgur.com/nKBgeLOr.jpg,https://
           i.imgur.com/yVjJZ1Yr.jpg">
   </wcia-photo-carousel>
</body>
</html>

Browse the complete HTML listing showing an external script loading a Web Component alongside its stylesheet. section 5.1

How Web Components in Action covers it

liveBook manning.com

Read Web Components in Action on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

D3.js in Action, Third EditionA script element, or script tag, is an HTML element that embeds executable code or references an external script file.
liveBook manning.com

Secrets of the JavaScript Ninja, Second EditionAn HTML element whose content or referenced resource contains executable script code.

Compare how 3 books explain script element →

Related concepts

Document Object Modeluses · The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
JavaScriptuses · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
HTMLpart of · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
modulealternative to · A module is a distinct, bounded software unit that groups related code or functionality and provides an organizational or interaction boundary within a larger system.
D3.jsuses · D3.js is an open-source JavaScript library for binding data to documents and creating dynamic, interactive visualizations in web browsers.

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.