is-land v4.0.0

• Reduces compressed file size by 7% by moving the server framework autoinit code into a separate file to streamline the core file for Web Components use.
  • Breaking change: If you use the petite-vue, vue, svelte, svelte-ssr, or preact examples, make sure to include or import is-land-autoinit.js in addition to the core is-land.js file.
• Fixes el.wait is not a function bug with nested islands and fallback web components.

Full Changelog: v3.0.2...v4.0.0

is-land v3.0.2

• Support new shadowrootmode="open" attribute for Declarative Shadow DOM moving forward. Previous method shadowroot="open" will continue to work moving forward. Demo of Declarative Shadow DOM with <is-land>
• Adds new WebC component. Use <is-land webc:import="npm:@11ty/is-land"> to import the component from npm. Read more about webc:import.
• Same Brotli compressed file size as the previous release: 1.73 kB

Full Changelog: v3.0.1...v3.0.2

is-land v3.0.1

• Adds more descriptive export for imports using JavaScript API
  • Without bundler: import { Island } from "./is-land.js";
  • With bunder: import { Island } from "@11ty/is-land";
• Previous method still works fine:
  • Without bundler: import "./is-land.js";
  • With bunder: import "@11ty/is-land";

Full Changelog: v3.0.0...v3.0.1

is-land v3.0.0

• Adds support for Declarative Shadow DOM <template shadowroot="open"> #13 Thank you @e111077!

  • Example demo
  • Learn more at web.dev: Declarative Shadow DOM
  • Notably, this does include a tiny (4 lines of code) polyfill for browsers that do not support Declarative Shadow DOM (Firefox and Safari at time of writing).

• Support community standard defer-hydration attribute on custom elements to skip custom element rename step #14 Thank you @dgp1130!

  • defer-hydration signals to component code that they should skip initialization. They must implement a attributeChangedCallback to trigger initialization when defer-hydration is removed by is-land (when the island hydrates). You can see a component sample using defer-hydration.

• <is-land> without loading conditions (on: attributes) skip custom element rename step #15

• Full milestone: https://github.com/11ty/is-land/milestone/1?closed=1

• Full changelog: v2.0.3...v3.0.0

is-land v2.0.0

I’ll just be frank: the features added in v1.0.1 were a bad idea. In order to keep this client JS file as small and streamlined as possible, we’ve removed the following features for dynamic CSS/JS loading:

• ❌ <script type="module/island">
• ❌ <script type="module/island" src="my-script-file.js">
• ❌ <style media="style/island">
• ❌ <link rel="stylesheet" media="style/island">

This saves 1.22 kB of JS.

All of the above can be accomplished with the <template data-island> feature instead (with less magic and better syntax highlighting in your editor too) like so:

✅ ✅ ✅ ✅

<is-land>
  <template data-island>
    <script type="module">/* My inline JS */</script>
    <script type="module" src="my-js-file.js"></script>
    <style>/* My inline CSS */</style>
    <link rel="stylesheet" href="my-css-file.css">
  </template>
</is-land>

Documentation has been updated with the new recommendations.

is-land v1.0.1

⚠️ This release is deprecated. Please use is-land v2.0.0 instead!

Previous versions of is-land allowed <script type="module/island"> for dynamic inline script and the ready attribute for custom is-land styling.

This version adds support for:

• External scripts <script type="module/island" src="my-script-file.js">
• Inline style <style media="style/island">
  • Use data-media (e.g. <style media="style/island" data-media="(min-width: 1px)">) to set your own media attribute value.
• External style <link rel="stylesheet" media="style/island">
  • Use data-media (e.g. <link rel="stylesheet" media="style/island" data-media="(min-width: 1px)">) to set your own media attribute value.

View on the is-land.11ty.dev Demos