A new performance-focused way to add interactive client-side components to your web site.
MIT License
Bot releases are hidden (Show)
autoinit
code into a separate file to streamline the core file for Web Components use.
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.el.wait is not a function
bug with nested islands and fallback web components.Full Changelog: https://github.com/11ty/is-land/compare/v3.0.2...v4.0.0
Published by zachleat over 1 year ago
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>
<is-land webc:import="npm:@11ty/is-land">
to import the component from npm. Read more about webc:import
.Full Changelog: https://github.com/11ty/is-land/compare/v3.0.1...v3.0.2
Published by zachleat over 1 year ago
import { Island } from "./is-land.js";
import { Island } from "@11ty/is-land";
import "./is-land.js";
import "@11ty/is-land";
Full Changelog: https://github.com/11ty/is-land/compare/v3.0.0...v3.0.1
Published by zachleat almost 2 years ago
Adds support for Declarative Shadow DOM <template shadowroot="open">
#13 Thank you @e111077!
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: https://github.com/11ty/is-land/compare/v2.0.3...v3.0.0
Published by zachleat about 2 years ago
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.
Published by zachleat about 2 years ago
⚠️ 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:
<script type="module/island" src="my-script-file.js">
<style media="style/island">
data-media
(e.g. <style media="style/island" data-media="(min-width: 1px)">
) to set your own media
attribute value.<link rel="stylesheet" media="style/island">
data-media
(e.g. <link rel="stylesheet" media="style/island" data-media="(min-width: 1px)">
) to set your own media
attribute value.