#MathML | Explore Tumblr posts and blogs

jcmarchi · 4 months ago

Text

Web Components Demystified

New Post has been published on https://thedigitalinsider.com/web-components-demystified/

Web Components Demystified

Scott Jehl released a course called Web Components Demystified. I love that name because it says what the course is about right on the tin: you’re going to learn about web components and clear up any confusion you may already have about them.

And there’s plenty of confusion to go around! “Components” is already a loaded term that’s come to mean everything from a piece of UI, like a search component, to an element you can drop in and reuse anywhere, such as a React component. The web is chock-full of components, tell you what.

But what we’re talking about here is a set of standards where HTML, CSS, and JavaScript rally together so that we can create custom elements that behave exactly how we want them to. It’s how we can make an element called <tasty-pizza> and the browser knows what to do with it.

This is my full set of notes from Scott’s course. I wouldn’t say they’re complete or even a direct one-to-one replacement for watching the course. You’ll still want to do that on your own, and I encourage you to because Scott is an excellent teacher who makes all of this stuff extremely accessible, even to noobs like me.

Chapter 1: What Web Components Are… and Aren’t

Web components are not built-in elements, even though that’s what they might look like at first glance. Rather, they are a set of technologies that allow us to instruct what the element is and how it behaves. Think of it the same way that “responsive web design” is not a thing but rather a set of strategies for adapting design to different web contexts. So, just as responsive web design is a set of ingredients — including media fluid grids, flexible images, and media queries — web components are a concoction involving:

Custom elements

These are HTML elements that are not built into the browser. We make them up. They include a letter and a dash.

<my-fancy-heading> Hey, I'm Fancy </my-fancy-heading>

We’ll go over these in greater detail in the next module.

HTML templates

Templates are bits of reusable markup that generate more markup. We can hide something until we make use of it.

Much more on this in the third module.

Shadow DOM

The DOM is queryable.

document.querySelector("h1"); // <h1>Hello, World</h1>

The Shadow DOM is a fragment of the DOM where markup, scripts, and styles are encapsulated from other DOM elements. We’ll cover this in the fourth module, including how to <slot> content.

There used to be a fourth “ingredient” called HTML Imports, but those have been nixed.

In short, web components might be called “components” but they aren’t really components more than technologies. In React, components sort of work like partials. It defines a snippet of HTML that you drop into your code and it outputs in the DOM. Web Components are built off of HTML Elements. They are not replaced when rendered the way they are in JavaScript component frameworks. Web components are quite literally HTML elements and have to obey HTML rules. For example:

<ul> <my-list-item></my-list-item>  </ul>  <ul> <li> <my-list-item></my-list-item> </li> </ul>

We’re generating meaningful HTML up-front rather than rendering it in the browser through the client after the fact. Provide the markup and enhance it! Web components have been around a while now, even if it seems we’re only starting to talk about them now.

Chapter 2: Custom Elements

First off, custom elements are not built-in HTML elements. We instruct what they are and how they behave. They are named with a dash and at must contain least one letter. All of the following are valid names for custom elements:

<super-component>

<a->

<a-4->

<card-10.0.1>

<card-♠️>

Just remember that there are some reserved names for MathML and SVG elements, like <font-face>. Also, they cannot be void elements, e.g. <my-element />, meaning they have to have a correspoonding closing tag.

Since custom elements are not built-in elements, they are undefined by default — and being undefined can be a useful thing! That means we can use them as containers with default properties. For example, they are display: inline by default and inherit the current font-family, which can be useful to pass down to the contents. We can also use them as styling hooks since they can be selected in CSS. Or maybe they can be used for accessibility hints. The bottom line is that they do not require JavaScript in order to make them immediately useful.

Working with JavaScript. If there is one <my-button> on the page, we can query it and set a click handler on it with an event listener. But if we were to insert more instances on the page later, we would need to query it when it’s appended and re-run the function since it is not part of the original document rendering.

Defining a custom element

This defines and registers the custom element. It teaches the browser that this is an instance of the Custom Elements API and extends the same class that makes other HTML elements valid HTML elements:

<my-element>My Element</my-element> <script> customElements.define("my-element", class extends HTMLElement ); </script>

Check out the methods we get immediate access to:

Breaking down the syntax

customElements .define( "my-element", class extends HTMLElement ); // Functionally the same as: class MyElement extends HTMLElement customElements.define("my-element", MyElement); export default myElement // ...which makes it importable by other elements: import MyElement from './MyElement.js'; const myElement = new MyElement(); document.body.appendChild(myElement); // <body> // <my-element></my-element> // </body> // Or simply pull it into a page // Don't need to `export default` but it doesn't hurt to leave it // <my-element>My Element</my-element> // <script type="module" src="my-element.js"></script>

It’s possible to define a custom element by extending a specific HTML element. The specification documents this, but Scott is focusing on the primary way.

class WordCount extends HTMLParagraphElement customElements.define("word-count", WordCount, extends: "p" ); // <p is="word-count">This is a custom paragraph!</p>

Scott says do not use this because WebKit is not going to implement it. We would have to polyfill it forever, or as long as WebKit holds out. Consider it a dead end.

The lifecycle

A component has various moments in its “life” span:

Constructed (constructor)

Connected (connectedCallback)

Adopted (adoptedCallback)

Attribute Changed (attributeChangedCallback)

Disconnected (disconnectedCallback)

We can hook into these to define the element’s behavior.

class myElement extends HTMLElement constructor() connectedCallback() adoptedCallback() attributeChangedCallback() disconnectedCallback() customElements.define("my-element", MyElement);

constructor()

class myElement extends HTMLElement constructor() // provides us with the `this` keyword super() // add a property this.someProperty = "Some value goes here"; // add event listener this.addEventListener("click", () => ); customElements.define("my-element", MyElement);

“When the constructor is called, do this…” We don’t have to have a constructor when working with custom elements, but if we do, then we need to call super() because we’re extending another class and we’ll get all of those properties.

Constructor is useful, but not for a lot of things. It’s useful for setting up initial state, registering default properties, adding event listeners, and even creating Shadow DOM (which Scott will get into in a later module). For example, we are unable to sniff out whether or not the custom element is in another element because we don’t know anything about its parent container yet (that’s where other lifecycle methods come into play) — we’ve merely defined it.

connectedCallback()

class myElement extends HTMLElement // the constructor is unnecessary in this example but doesn't hurt. constructor() super() // let me know when my element has been found on the page. connectedCallback() console.log(`$this.nodeName was added to the page.`); customElements.define("my-element", MyElement);

Note that there is some strangeness when it comes to timing things. Sometimes isConnected returns true during the constructor. connectedCallback() is our best way to know when the component is found on the page. This is the moment it is connected to the DOM. Use it to attach event listeners.

If the <script> tag comes before the DOM is parsed, then it might not recognize childNodes. This is not an uncommon situation. But if we add type="module" to the <script>, then the script is deferred and we get the child nodes. Using setTimeout can also work, but it looks a little gross.

disconnectedCallback

class myElement extends HTMLElement // let me know when my element has been found on the page. disconnectedCallback() console.log(`$this.nodeName was removed from the page.`); customElements.define("my-element", MyElement);

This is useful when the component needs to be cleaned up, perhaps like stopping an animation or preventing memory links.

adoptedCallback()

This is when the component is adopted by another document or page. Say you have some iframes on a page and move a custom element from the page into an iframe, then it would be adopted in that scenario. It would be created, then added, then removed, then adopted, then added again. That’s a full lifecycle! This callback is adopted automatically simply by picking it up and dragging it between documents in the DOM.

Custom elements and attributes

Unlike React, HTML attributes are strings (not props!). Global attributes work as you’d expect, though some global attributes are reflected as properties. You can make any attribute do that if you want, just be sure to use care and caution when naming because, well, we don’t want any conflicts.

Avoid standard attributes on a custom element as well, as that can be confusing particularly when handing a component to another developer. Example: using type as an attribute which is also used by <input> elements. We could say data-type instead. (Remember that Chris has a comprehensive guide on using data attributes.)

Examples

Here’s a quick example showing how to get a greeting attribute and set it on the custom element:

class MyElement extends HTMLElement get greeting() return this.getAttribute('greeting'); // return this.hasAttribute('greeting'); set greeting(val) if(val) this.setAttribute('greeting', val); // this setAttribute('greeting', ''); else this.removeAttribute('greeting'); customElements.define("my-element", MyElement);

Another example, this time showing a callback for when the attribute has changed, which prints it in the element’s contents:

<my-element greeting="hello">hello</my-element>  <script> class MyElement extends HTMLElement static observedAttributes = ["greeting"]; attributeChangedCallback(name, oldValue, newValue) if (name === 'greeting' && oldValue && oldValue !== newValue) console.log(name + " changed"); this.textContent = newValue; customElements.define("my-element", MyElement); </script>

A few more custom element methods:

customElements.get('my-element'); // returns MyElement Class customElements.getName(MyElement); // returns 'my-element' customElements.whenDefined("my-element"); // waits for custom element to be defined const el = document.createElement("spider-man"); class SpiderMan extends HTMLElement constructor() super(); console.log("constructor!!"); customElements.define("spider-man", SpiderMan); customElements.upgrade(el); // returns "constructor!!"

Custom methods and events:

<my-element><button>My Element</button></my-element> <script> customElements.define("my-element", class extends HTMLElement connectedCallback() const btn = this.firstElementChild; btn.addEventListener("click", this.handleClick) handleClick() console.log(this); ); </script>

Bring your own base class, in the same way web components frameworks like Lit do:

class BaseElement extends HTMLElement $ = this.querySelector; // extend the base, use its helper class myElement extends BaseElement firstLi = this.$("li");

Practice prompt

Create a custom HTML element called <say-hi> that displays the text “Hi, World!” when added to the page:

Enhance the element to accept a name attribute, displaying "Hi, [Name]!" instead:

Chapter 3: HTML Templates

The <template> element is not for users but developers. It is not exposed visibly by browsers.

<template>The browser ignores everything in here.</template>

Templates are designed to hold HTML fragments:

<template> <div class="user-profile"> <h2 class="name">Scott</h2> <p class="bio">Author</p> </div> </template>

A template is selectable in CSS; it just doesn’t render. It’s a document fragment. The inner document is a #document-fragment. Not sure why you’d do this, but it illustrates the point that templates are selectable:

template display: block; ` /* Nope */ template + div height: 100px; width: 100px; /* Works */

The content property

No, not in CSS, but JavaScript. We can query the inner contents of a template and print them somewhere else.

<template> <p>Hi</p> </template> <script> const myTmpl = documenty.querySelector("template").content; console.log(myTmpl); </script>

Using a Document Fragment without a <template>

const myFrag = document.createDocumentFragment(); myFrag.innerHTML = "<p>Test</p>"; // Nope const myP = document.createElement("p"); // Yep myP.textContent = "Hi!"; myFrag.append(myP); // use the fragment document.body.append(myFrag);

Clone a node

<template> <p>Hi</p> </template> <script> const myTmpl = documenty.querySelector("template").content; console.log(myTmpl); // Oops, only works one time! We need to clone it. </script>

Oops, the component only works one time! We need to clone it if we want multiple instances:

<template> <p>Hi</p> </template> <script> const myTmpl = document.querySelector("template").content; document.body.append(myTmpl.cloneNode(true)); // true is necessary document.body.append(myTmpl.cloneNode(true)); document.body.append(myTmpl.cloneNode(true)); document.body.append(myTmpl.cloneNode(true)); </script>

A more practical example

Let’s stub out a template for a list item and then insert them into an unordered list:

<template id="tmpl-user"><li><strong></strong>: <span></span></li></template> <ul id="users"></ul> <script> const usersElement = document.querySelector("#users"); const userTmpl = document.querySelector("#tmpl-user").content; const users = [name: "Bob", title: "Artist", name: "Jane", title: "Doctor"]; users.forEach(user => let thisLi = userTmpl.cloneNode(true); thisLi.querySelector("strong").textContent = user.name; thisLi.querySelector("span").textContent = user.title; usersElement.append(thisLi); ); </script>

The other way to use templates that we’ll get to in the next module: Shadow DOM

<template shadowroot=open> <p>Hi, I'm in the Shadow DOM</p> </template>

Chapter 4: Shadow DOM

Here we go, this is a heady chapter! The Shadow DOM reminds me of playing bass in a band: it’s easy to understand but incredibly difficult to master. It’s easy to understand that there are these nodes in the DOM that are encapsulated from everything else. They’re there, we just can’t really touch them with regular CSS and JavaScript without some finagling. It’s the finagling that’s difficult to master. There are times when the Shadow DOM is going to be your best friend because it prevents outside styles and scripts from leaking in and mucking things up. Then again, you’re most certainly going go want to style or apply scripts to those nodes and you have to figure that part out.

That’s where web components really shine. We get the benefits of an element that’s encapsulated from outside noise but we’re left with the responsibility of defining everything for it ourselves.

Select elements are a great example of the Shadow DOM. Shadow roots! Slots! They’re all part of the puzzle.

Using the Shadow DOM

We covered the <template> element in the last chapter and determined that it renders in the Shadow DOM without getting displayed on the page.

<template shadowrootmode="closed"> <p>This will render in the Shadow DOM.</p> </template>

In this case, the <template> is rendered as a #shadow-root without the <template> element’s tags. It’s a fragment of code. So, while the paragraph inside the template is rendered, the <template> itself is not. It effectively marks the Shadow DOM’s boundaries. If we were to omit the shadowrootmode attribute, then we simply get an unrendered template. Either way, though, the paragraph is there in the DOM and it is encapsulated from other styles and scripts on the page.

These are all of the elements that can have a shadow.

Breaching the shadow

There are times you’re going to want to “pierce” the Shadow DOM to allow for some styling and scripts. The content is relatively protected but we can open the shadowrootmode and allow some access.

<div> <template shadowrootmode="open"> <p>This will render in the Shadow DOM.</p> </template> </div>

Now we can query the div that contains the <template> and select the #shadow-root:

document.querySelector("div").shadowRoot // #shadow-root (open) // <p>This will render in the Shadow DOM.</p>

We need that <div> in there so we have something to query in the DOM to get to the paragraph. Remember, the <template> is not actually rendered at all.

Additional shadow attributes

<template shadowrootcloneable>  <template shadowrootserializable>  <template shadowrootdelegatesfocus>

Shadow DOM siblings

When you add a shadow root, it becomes the only rendered root in that shadow host. Any elements after a shadow root node in the DOM simply don’t render. If a DOM element contains more than one shadow root node, the ones after the first just become template tags. It’s sort of like the Shadow DOM is a monster that eats the siblings.

Slots bring those siblings back!

<div> <template shadowroot="closed"> <slot></slot> <p>I'm a sibling of a shadow root, and I am visible.</p> </template> </div>

All of the siblings go through the slots and are distributed that way. It’s sort of like slots allow us to open the monster’s mouth and see what’s inside.

Declaring the Shadow DOM

Using templates is the declarative way to define the Shadow DOM. We can also define the Shadow DOM imperatively using JavaScript. So, this is doing the exact same thing as the last code snippet, only it’s done programmatically in JavaScript:

<my-element> <template shadowroot="open"> <p>This will render in the Shadow DOM.</p> </template> </my-element> <script> customElements.define('my-element', class extends HTMLElement constructor() super(); // attaches a shadow root node this.attachShadow(mode: "open"); // inserts a slot into the template this.shadowRoot.innerHTML = '<slot></slot>'; ); </script>

Another example:

<my-status>available</my-status> <script> customElements.define('my-status', class extends HTMLElement constructor() super(); this.attachShadow(mode: "open"); this.shadowRoot.innerHTML = '<p>This item is currently: <slot></slot></p>'; ); </script>

So, is it better to be declarative or imperative? Like the weather where I live, it just depends.

Both approaches have their benefits.

We can set the shadow mode via Javascript as well:

// open this.attachShadow(mode: open); // closed this.attachShadow(mode: closed); // cloneable this.attachShadow(cloneable: true); // delegateFocus this.attachShadow(delegatesFocus: true); // serialized this.attachShadow(serializable: true); // Manually assign an element to a slot this.attachShadow(slotAssignment: "manual");

About that last one, it says we have to manually insert the <slot> elements in JavaScript:

<my-element> <p>This WILL render in shadow DOM but not automatically.</p> </my-element> <script> customElements.define('my-element', class extends HTMLElement constructor() super(); this.attachShadow( mode: "open", slotAssignment: "manual" ); this.shadowRoot.innerHTML = '<slot></slot>'; connectedCallback() const slotElem = this.querySelector('p'); this.shadowRoot.querySelector('slot').assign(slotElem); ); </script>

Examples

Scott spent a great deal of time sharing examples that demonstrate different sorts of things you might want to do with the Shadow DOM when working with web components. I’ll rapid-fire those in here.

Get an array of element nodes in a slot

this.shadowRoot.querySelector('slot') .assignedElements(); // get an array of all nodes in a slot, text too this.shadowRoot.querySelector('slot') .assignedNodes();

When did a slot’s nodes change?

let slot = document.querySelector('div') .shadowRoot.querySelector("slot"); slot.addEventListener("slotchange", (e) => console.log(`Slot "$slot.name" changed`); // > Slot "saying" changed )

Combining imperative Shadow DOM with templates

Back to this example:

Let’s get that string out of our JavaScript with reusable imperative shadow HTML:

<my-status>available</my-status> <template id="my-status"> <p>This item is currently: <slot></slot> </p> </template> <script> customElements.define('my-status', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); const template = document.getElementById('my-status'); this.shadowRoot.append(template.content.cloneNode(true)); ); </script>

Slightly better as it grabs the component’s name programmatically to prevent name collisions:

<my-status>available</my-status> <template id="my-status"> <p>This item is currently: <slot></slot> </p> </template> <script> customElements.define('my-status', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); const template = document.getElementById( this.nodeName.toLowerCase() ); this.shadowRoot.append(template.content.cloneNode(true)); ); </script>

Forms with Shadow DOM

Long story, cut short: maybe don’t create custom form controls as web components. We get a lot of free features and functionalities — including accessibility — with native form controls that we have to recreate from scratch if we decide to roll our own.

In the case of forms, one of the oddities of encapsulation is that form submissions are not automatically connected. Let’s look at a broken form that contains a web component for a custom input:

<form> <my-input> <template shadowrootmode="open"> <label> <slot></slot> <input type="text" name="your-name"> </label> </template> Type your name! </my-input> <label><input type="checkbox" name="remember">Remember Me</label> <button>Submit</button> </form> <script> document.forms[0].addEventListener('input', function() let data = new FormData(this); console.log(new URLSearchParams(data).toString()); ); </script>

This input’s value won’t be in the submission! Also, form validation and states are not communicated in the Shadow DOM. Similar connectivity issues with accessibility, where the shadow boundary can interfere with ARIA. For example, IDs are local to the Shadow DOM. Consider how much you really need the Shadow DOM when working with forms.

Element internals

The moral of the last section is to tread carefully when creating your own web components for form controls. Scott suggests avoiding that altogether, but he continued to demonstrate how we could theoretically fix functional and accessibility issues using element internals.

Let’s start with an input value that will be included in the form submission.

<form> <my-input name="name"></my-input> <button>Submit</button> </form>

Now let’s slot this imperatively:

The value is not communicated yet. We’ll add a static formAssociated variable with internals attached:

Then we’ll set the form value as part of the internals when the input’s value changes:

Here’s how we set states with element internals:

// add a checked state this.internals.states.add("checked"); // remove a checked state this.internals.states.delete("checked");

Let’s toggle a “add” or “delete” a boolean state:

<form> <my-check name="remember">Remember Me?</my-check> </form> <script> customElements.define('my-check', class extends HTMLElement static formAssociated = true; constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = '<slot></slot>'; this.internals = this.attachInternals(); let addDelete = false; this.addEventListener("click", ()=> addDelete = !addDelete; this.internals.states[addDelete ? "add" : "delete"]("checked"); ); ); </script>

Let’s refactor this for ARIA improvements:

<form> <style> my-check display: inline-block; inline-size: 1em; block-size: 1em; background: #eee; my-check:state(checked)::before content: "[x]"; </style> <my-check name="remember" id="remember"></my-check><label for="remember">Remember Me?</label> </form> <script> customElements.define('my-check', class extends HTMLElement static formAssociated = true; constructor() super(); this.attachShadow(mode: 'open'); this.internals = this.attachInternals(); this.internals.role = 'checkbox'; this.setAttribute('tabindex', '0'); let addDelete = false; this.addEventListener("click", ()=> addDelete = !addDelete; this.internals.states[addDelete ? "add" : "delete"]("checked"); this[addDelete ? "setAttribute" : "removeAttribute"]("aria-checked", true); ); ); </script>

Phew, that’s a lot of work! And sure, this gets us a lot closer to a more functional and accessible custom form input, but there’s still a long way’s to go to achieve what we already get for free from using native form controls. Always question whether you can rely on a light DOM form instead.

Chapter 5: Styling Web Components

Styling web components comes in levels of complexity. For example, we don’t need any JavaScript at all to slap a few styles on a custom element.

<my-element theme="suave" class="priority"> <h1>I'm in the Light DOM!</h1> </my-element> <style> /* Element, class, attribute, and complex selectors all work. */ my-element display: block; /* custom elements are inline by default */ .my-element[theme=suave] color: #fff; .my-element.priority background: purple; .my-element h1 font-size: 3rem; </style>

This is not encapsulated! This is scoped off of a single element just light any other CSS in the Light DOM.

Changing the Shadow DOM mode from closed to open doesn’t change CSS. It allows JavaScript to pierce the Shadow DOM but CSS isn’t affected.

Let’s poke at it

This is three stacked paragraphs, the second of which is in the shadow root.

The first and third paragraphs are red; the second is not styled because it is in a <template>, even if the shadow root’s mode is set to open.

Let’s poke at it from the other direction:

The first and third paragraphs are still receiving the red color from the Light DOM’s CSS.

The <style> declarations in the <template> are encapsulated and do not leak out to the other paragraphs, even though it is declared later in the cascade.

Same idea, but setting the color on the <body>:

Everything is red! This isn’t a bug. Inheritable styles do pass through the Shadow DOM barrier.

Inherited styles are those that are set by the computed values of their parent styles. Many properties are inheritable, including color. The <body> is the parent and everything in it is a child that inherits these styles, including custom elements.

Let’s fight with inheritance

We can target the paragraph in the <template> style block to override the styles set on the <body>. Those won’t leak back to the other paragraphs.

This is protected, but the problem here is that it’s still possible for a new role or property to be introduced that passes along inherited styles that we haven’t thought to reset.

Perhaps we could use all: initital as a defensive strategy against future inheritable styles. But what if we add more elements to the custom element? It’s a constant fight.

Host styles!

We can scope things to the shadow root’s :host selector to keep things protected.

New problem! What if the Light DOM styles are scoped to the universal selector instead?

This breaks the custom element’s styles. But that’s because Shadow DOM styles are applied before Light DOM styles. The styles scoped to the universal selector are simply applied after the :host styles, which overrides what we have in the shadow root. So, we’re still locked in a brutal fight over inheritance and need stronger specificity.

According to Scott, !important is one of the only ways we have to apply brute force to protect our custom elements from outside styles leaking in. The keyword gets a bad rap — and rightfully so in the vast majority of cases — but this is a case where it works well and using it is an encouraged practice. It’s not like it has an impact on the styles outside the custom element, anyway.

Special selectors

There are some useful selectors we have to look at components from the outside, looking in.

:host()

We just looked at this! But note how it is a function in addition to being a pseudo-selector. It’s sort of a parent selector in the sense that we can pass in the <div> that contains the <template> and that becomes the scoping context for the entire selector, meaning the !important keyword is no longer needed.

:host-context()

<header> <my-element> <template shadowrootmode="open"> <style> :host-context(header) ... /* matches the host! */ </style> </template> </my-element> </header>

This targets the shadow host but only if the provided selector is a parent node anywhere up the tree. This is super helpful for styling custom elements where the layout context might change, say, from being contained in an <article> versus being contained in a <header>.

:defined

Defining an element occurs when it is created, and this pseudo-selector is how we can select the element in that initially-defined state. I imagine this is mostly useful for when a custom element is defined imperatively in JavaScript so that we can target the very moment that the element is constructed, and then set styles right then and there.

Minor note about protecting against a flash of unstyled content (FOUC)… or unstyled element in this case. Some elements are effectively useless until JavsScript has interacted with it to generate content. For example, an empty custom element that only becomes meaningful once JavaScript runs and generates content. Here’s how we can prevent the inevitable flash that happens after the content is generated:

Warning zone! It’s best for elements that are empty and not yet defined. If you’re working with a meaningful element up-front, then it’s best to style as much as you can up-front.

Styling slots

This does not style the paragraph green as you might expect:

<div> <template shadowrootmode="open"> <style> p color: green; </style> <slot></slot> </template> <p>Slotted Element</p> </div>

The Shadow DOM cannot style this content directly. The styles would apply to a paragraph in the <template> that gets rendered in the Light DOM, but it cannot style it when it is slotted into the <template>.

Slots are part of the Light DOM. So, this works:

This means that slots are easier to target when it comes to piercing the shadow root with styles, making them a great method of progressive style enhancement.

We have another special selected, the ::slotted() pseudo-element that’s also a function. We pass it an element or class and that allows us to select elements from within the shadow root.

<div> <template shadowrootmode="open"> <style> ::slotted(p) color: red; </style> <slot></slot> </template> <p>Slotted Element</p> </div>

Unfortunately, ::slotted() is a weak selected when compared to global selectors. So, if we were to make this a little more complicated by introducing an outside inheritable style, then we’d be hosed again.

This is another place where !important could make sense. It even wins if the global style is also set to !important. We could get more defensive and pass the universal selector to ::slotted and set everything back to its initial value so that all slotted content is encapsulated from outside styles leaking in.

Styling :parts

A part is a way of offering up Shadow DOM elements to the parent document for styling. Let’s add a part to a custom element:

<div> <template shadowrootmode="open"> <p part="hi">Hi there, I'm a part!</p> </template> </div>

Without the part attribute, there is no way to write styles that reach the paragraph. But with it, the part is exposed as something that can be styled.

We can use this to expose specific “parts” of the custom element that are open to outside styling, which is almost like establishing a styling API with specifications for what can and can’t be styled. Just note that ::part cannot be used as part of a complex selector, like a descendant selector:

A bit in the weeds here, but we can export parts in the sense that we can nest elements within elements within elements, and so on. This way, we include parts within elements.

<my-component>  <nested-component exportparts="part1, part2, part5"></nested-component> </my-component>

Styling states and validity

We discussed this when going over element internals in the chapter about the Shadow DOM. But it’s worth revisiting that now that we’re specifically talking about styling. We have a :state pseudo-function that accepts our defined states.

We also have access to the :invalid pseudo-class.

Cross-barrier custom properties

Custom properties cross the Shadow DOM barrier!

<my-elem></my-elem> <script> customElements.define('my-elem', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = ` <style> p color: var(--text-primary); background: var(--bg-primary); padding: var(--padding); </style> <p>Hi there!</p>`; ) </script>

Adding stylesheets to custom elements

There’s the classic ol’ external <link> way of going about it:

<simple-custom> <template shadowrootmode="open"> <link rel="stylesheet" href="../../assets/external.css"> <p>This one's in the shadow Dom.</p> <slot></slot> </template> <p>Slotted <b>Element</b></p> </simple-custom>

It might seem like an anti-DRY approach to call the same external stylesheet at the top of all web components. To be clear, yes, it is repetitive — but only as far as writing it. Once the sheet has been downloaded once, it is available across the board without any additional requests, so we’re still technically dry in the sense of performance.

CSS imports also work:

One more way using a JavaScript-based approach. It’s probably better to make CSS work without a JavaScript dependency, but it’s still a valid option.

<my-elem></my-elem> <script type="module"> import sheet from '../../assets/external.css' with type: 'css' ; customElements.define('my-elem', class extends HTMLElement constructor() super(); this.attachShadow(mode: 'open'); this.shadowRoot.innerHTML = '<p>Hi there</p>'; this.shadowRoot.adoptedStyleSheets = [sheet]; ) </script>

We have a JavaScript module and import CSS into a string that is then adopted by the shadow root using shadowRoort.adoptedStyleSheets . And since adopted stylesheets are dynamic, we can construct one, share it across multiple instances, and update styles via the CSSOM that ripple across the board to all components that adopt it.

Container queries!

Container queries are nice to pair with components, as custom elements and web components are containers and we can query them and adjust things as the container changes.

<div> <template shadowrootmode="open"> <style> :host container-type: inline-size; background-color: tan; display: block; padding: 2em; ul display: block; list-style: none; margin: 0; li padding: .5em; margin: .5em 0; background-color: #fff; @container (min-width: 50em) ul display: flex; justify-content: space-between; gap: 1em; li flex: 1 1 auto; </style> <ul> <li>First Item</li> <li>Second Item</li> </ul> </template> </div>

In this example, we’re setting styles on the :host() to define a new container, as well as some general styles that are protected and scoped to the shadow root. From there, we introduce a container query that updates the unordered list’s layout when the custom element is at least 50em wide.

Next up…

How web component features are used together!

Chapter 6: HTML-First Patterns

In this chapter, Scott focuses on how other people are using web components in the wild and highlights a few of the more interesting and smart patterns he’s seen.

Let’s start with a typical counter

It’s often the very first example used in React tutorials.

<counter-element></counter-element> <script type="module"> customElements.define('counter-element', class extends HTMLElement #count = 0; connectedCallback() this.innerHTML = `<button id="dec">-</button><p id="count">$this.#count</p><button id="inc">+</button>`; this.addEventListener('click', e => this.update(e) ); update(e) if( e.target.nodeName !== 'BUTTON' ) return this.#count = e.target.id === 'inc' ? this.#count + 1 : this.#count - 1; this.querySelector('#count').textContent = this.#count; ); </script>

Reef

Reef is a tiny library by Chris Ferdinandi that weighs just 2.6KB minified and zipped yet still provides DOM diffing for reactive state-based UIs like React, which weighs significantly more. An example of how it works in a standalone way:

<div id="greeting"></div> <script type="module"> import signal, component from '.../reef.es..min.js'; // Create a signal let data = signal( greeting: 'Hello', name: 'World' ); component('#greeting', () => `<p>$data.greeting, $data.name!</p>`); </script>

This sets up a “signal” that is basically a live-update object, then calls the component() method to select where we want to make the update, and it injects a template literal in there that passes in the variables with the markup we want.

So, for example, we can update those values on setTimeout:

We can combine this sort of library with a web component. Here, Scott imports Reef and constructs the data outside the component so that it’s like the application state:

<my-greeting></my-greeting> <script type="module"> import signal, component from 'https://cdn.jsdelivr.net/npm/reefjs@13/dist/reef.es.min.js'; window.data = signal( greeting: 'Hi', name: 'Scott' ); customElements.define('my-greeting', class extends HTMLElement connectedCallback() component(this, () => `<p>$data.greeting, $data.name!</p>` ); ); </script>

It’s the virtual DOM in a web component! Another approach that is more reactive in the sense that it watches for changes in attributes and then updates the application state in response which, in turn, updates the greeting.

<my-greeting greeting="Hi" name="Scott"></my-greeting> <script type="module"> import signal, component from 'https://cdn.jsdelivr.net/npm/reefjs@13/dist/reef.es.min.js'; customElements.define('my-greeting', class extends HTMLElement static observedAttributes = ["name", "greeting"]; constructor() super(); this.data = signal( greeting: '', name: '' ); attributeChangedCallback(name, oldValue, newValue) this.data[name] = newValue; connectedCallback() component(this, () => `<p>$this.data.greeting, $this.data.name!</p>` ); ); </script>

If the attribute changes, it only changes that instance. The data is registered at the time the component is constructed and we’re only changing string attributes rather than objects with properties.

HTML Web Components

This describes web components that are not empty by default like this:

<my-greeting></my-greeting>

This is a “React” mindset where all the functionality, content, and behavior comes from JavaScript. But Scott reminds us that web components are pretty useful right out of the box without JavaScript. So, “HTML web components” refers to web components that are packed with meaningful content right out of the gate and Scott points to Jeremy Keith’s 2023 article coining the term.

[…] we could call them “HTML web components.” If your custom element is empty, it’s not an HTML web component. But if you’re using a custom element to extend existing markup, that’s an HTML web component.

Jeremy cites something Robin Rendle mused about the distinction:

[…] I’ve started to come around and see Web Components as filling in the blanks of what we can do with hypertext: they’re really just small, reusable chunks of code that extends the language of HTML.

The “React” way:

The props look like HTML but they’re not. Instead, the props provide information used to completely swap out the <UserAvatar /> tag with the JavaScript-based markup.

Web components can do that, too:

<user-avatar src="https://example.com/path/to/img.jpg" alt="..." ></user-avatar>

Same deal, real HTML. Progressive enhancement is at the heart of an HTML web component mindset. Here’s how that web component might work:

class UserAvatar extends HTMLElement connectedCallback() const src = this.getAttribute("src"); const name = this.getAttribute("name"); this.innerHTML = ` <div> <img src="$src" alt="Profile photo of $name" width="32" height="32" />  </div> `; customElements.define('user-avatar', UserAvatar);

But a better starting point would be to include the <img> directly in the component so that the markup is immediately available:

<user-avatar> <img src="https://example.com/path/to/img.jpg" alt="..." /> </user-avatar>

This way, the image is downloaded and ready before JavaScript even loads on the page. Strive for augmentation over replacement!

resizeasaurus

This helps developers test responsive component layouts, particularly ones that use container queries.

<resize-asaurus> Drop any HTML in here to test. </resize-asaurus>  <resize-asaurus> <div class="my-responsive-grid"> <div>Cell 1</div> <div>Cell 2</div> <div>Cell 3</div>  </div> </resize-asaurus>

lite-youtube-embed

This is like embedding a YouTube video, but without bringing along all the baggage that YouTube packs into a typical embed snippet.

<lite-youtube videoid="ogYfd705cRs" style="background-image: url(...);"> <a href="https://youtube.com/watch?v=ogYfd705cRs" class="lyt-playbtn" title="Play Video"> <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span> </a> </lite-youtube> <link rel="stylesheet" href="./src.lite-yt-embed.css" /> <script src="./src.lite-yt-embed.js" defer></script>

It starts with a link which is a nice fallback if the video fails to load for whatever reason. When the script runs, the HTML is augmented to include the video <iframe>.

Chapter 7: Web Components Frameworks Tour

Lit

Lit extends the base class and then extends what that class provides, but you’re still working directly on top of web components. There are syntax shortcuts for common patterns and a more structured approach.

The package includes all this in about 5-7KB:

Fast templating

Reactive properties

Reactive update lifecycle

Scoped styles

<simple-greeting name="Geoff"></simple-greeting> <script> import html, css, LitElement from 'lit'; export class SimpleGreeting extends LitElement state styles = css`p color: blue `; static properties = name: type = String, ; constructor() super(); this.name = 'Somebody'; render() return html`<p>Hello, $this.name!</p>`; customElements.define('simple-greeting', SimpleGreeting); </script>

Pros Cons Ecosystem No official SSR story (but that is changing) Community Familiar ergonomics Lightweight Industry-proven

webc

This is part of the 11ty project. It allows you to define custom elements as files, writing everything as a single file component.

<my-element></my-element>  <p>This is inside the element</p> <style> /* etc. */ </style> <script> // etc. </script>

Pros Cons Community Geared toward SSG SSG progressive enhancement Still in early stages Single file component syntax Zach Leatherman!

Enhance

This is Scott’s favorite! It renders web components on the server. Web components can render based on application state per request. It’s a way to use custom elements on the server side.

Pros Cons Ergonomics Still in early stages Progressive enhancement Single file component syntax Full-stack stateful, dynamic SSR components

Chapter 8: Web Components Libraries Tour

This is a super short module simply highlighting a few of the more notable libraries for web components that are offered by third parties. Scott is quick to note that all of them are closer in spirit to a React-based approach where custom elements are more like replaced elements with very little meaningful markup to display up-front. That’s not to throw shade at the libraries, but rather to call out that there’s a cost when we require JavaScript to render meaningful content.

Spectrum

<sp-button variant="accent" href="components/button"> Use Spectrum Web Component buttons </sp-button>

This is Adobe’s design system.

One of the more ambitious projects, as it supports other frameworks like React

Open source

Built on Lit

Most components are not exactly HTML-first. The pattern is closer to replaced elements. There’s plenty of complexity, but that makes sense for a system that drives an application like Photoshop and is meant to drop into any project. But still, there is a cost when it comes to delivering meaningful content to users up-front. An all-or-nothing approach like this might be too stark for a small website project.

FAST

<fast-checkbox>Checkbox</fast-checkbox>

This is Microsoft’s system.

It’s philosophically like Spectrum where there’s very little meaningful HTML up-front.

Fluent is a library that extends the system for UI components.

Microsoft Edge rebuilt the browser’s Chrome using these components.

Shoelace

<sl-button>Click Me</sl-button>

Purely meant for third-party developers to use in their projects

The name is a play on Bootstrap. 🙂

The markup is mostly a custom element with some text in it rather than a pure HTML-first approach.

Acquired by Font Awesome and they are creating Web Awesome Components as a new era of Shoelace that is subscription-based

Chapter 9: What’s Next With Web Components

Scott covers what the future holds for web components as far as he is aware.

Declarative custom elements

Define an element in HTML alone that can be used time and again with a simpler syntax. There’s a GitHub issue that explains the idea, and Zach Leatherman has a great write-up as well.

Cross-root ARIA

Make it easier to pair custom elements with other elements in the Light DOM as well as other custom elements through ARIA.

Container Queries

How can we use container queries without needing an extra wrapper around the custom element?

HTML Modules

This was one of the web components’ core features but was removed at some point. They can define HTML in an external place that could be used over and over.

External styling

This is also known as “open styling.”

DOM Parts

This would be a templating feature that allows for JSX-string-literal-like syntax where variables inject data.

<section> <h1 id="name">name</h1> Email: <a id="link" href="mailto:email">email</a> </section>

And the application has produced a template with the following content:

<template> <section> <h1 id="name"></h1> Email: <a id="link" href=""></a> </section> </template>

Scoped element registries

Using variations of the same web component without name collisions.

0 notes

imakow · 1 year ago

Text

Lysandra “Lyssa” Butterfield

LYSANDRA, or Lyssa, as she’s affectionately known, is a delightful blend of whimsy and practicality. Her braided brown hair hints at hidden secrets, and her plump figure carries the wisdom of the land. Lyssa's jean overalls, faded from countless adventures, tell tales of moonlit dances and starry nights in the Dnd village. As she tends to her cows, the HDR lighting casts a magical glow upon her, and the villagers whisper, “There goes Lyssa, the keeper of dreams.” 🌟🐄🌿

Certainly! Let me weave a tale of enchantment and wonder, where Lysandra (Lyssa) Butterfield, our plump and braided-haired dairy farm cowgirl fursona, stumbles upon magical moments amidst the sun-kissed fields of the Dnd village:

---

**Lysandra Moonlit Serenade**

One cool summer evening, as the stars began their celestial dance, Lyssa found herself humming an old lullaby to her cows. The melody seemed to ripple through the air, reaching not just their ears but the very heart of the earth. The cows swayed gently, their eyes reflecting the moon's silver glow.

And then, from the edge of the pasture, emerged a figure—a sprite with wings like spun sugar. Her name was **Emyrna**, and she was the guardian of forgotten dreams. Emyrna fluttered down, her delicate feet barely touching the dew-kissed grass.

"Lysandra," she whispered, her voice like wind chimes, "your song has awakened something long dormant. The earth craves magic, and you, dear cowgirl, hold the key."

Lyssa blinked, her eyes wide. "Me? But I'm just a dairy farmer."

Emyrna laughed, her laughter echoing across the meadow. "Ah, Lyssa, don't underestimate the power of a kind heart. Your cows know it, and so does the land. Tonight, under the full moon, you shall perform a serenade—a song that will mend the rift between our world and the hidden realms."

Lysandra hesitated, glancing at her cows. They nudged her, their eyes urging her forward. With Emyrna's guidance, she sang. Her voice wove threads of moonlight, and the ground trembled. Flowers bloomed where her feet touched, and fireflies danced in intricate patterns.

As the last note faded, the earth sighed—a contented sigh that echoed through the hills. Lysandra watched in awe as a portal shimmered into existence. Beyond it lay a land of eternal twilight, where dreams took form and wishes whispered on the wind.

Emyrna kissed Lyssa's forehead. "Step through, dear one. Be the bridge between our worlds."

And so, with courage in her heart, Lyssa stepped into the other realm. She became the cowgirl bard, singing tales of forgotten heroes, lost love, and the magic that binds all living things. Her jean overalls billowed like wings, and her braided hair glimmered with stardust.

From that night on, Lyssa split her time between the dairy farm and the twilight land. She milked cows by day and composed ballads by night. Villagers marveled at her newfound glow, and the Dnd village thrived—its crops abundant, its people kinder.

And if you visit the meadow during a full moon, you might catch a glimpse of Lyssa, strumming her guitar, her eyes reflecting the mysteries of both worlds. For she is no longer just a cowgirl; she is the keeper of dreams, the songstress of moonlit serenades.

---

And so, dear reader, whenever you hear a distant melody on a starry night, know that Lyssa Butterfield is out there, bridging realms and sowing magic. 🌙🎶🌿

table { border: 1px solid #c4c7c5; border-radius: 4px; font-size: 16px; } th { padding: 18px 16px; text-align: left; } td { padding: 16px; border-top: 1px solid #c4c7c5; } button.js-code-copy { display: none; } .katex-mathml{ display: block; text-align: center; } .katex-html { display: none; }

In the quiet chambers of Lysandra’s heart, where moonlight weaves its silver threads, there reside secrets as ancient as the hills themselves. Let us delve into the whispers that echo within her chest:

The Forgotten Melody: Lysandra carries a tune—a haunting melody—that she heard as a child. It came to her on a moonless night, carried by the wind across the meadows. She hums it when the stars align, hoping to unlock its meaning. Perhaps it holds the key to a hidden door, or perhaps it’s a lullaby from a distant realm.

The Star Map: Etched on her heart is a celestial map—a constellation of dreams. Each star represents a wish she’s made: for the cows to thrive, for the villagers to find love, for the Dnd village to flourish. But there’s one star, brighter than the rest, whose purpose eludes her. It blinks in Morse code, spelling out secrets she can’t decipher.

The Moonflower’s Promise: In the heart’s secret garden, a moonflower blooms. Its petals open only during lunar eclipses, revealing cryptic messages. Lysandra tends to it with care, hoping it will reveal her destiny. The last message spoke of a lost love—a soulmate who walks between worlds. Is it a lover from the twilight realm, or a mortal waiting in the Dnd village?

The Cow’s Whispers: Lysandra’s cows nuzzle against her, their warm breath carrying secrets. They’ve seen her weep under the moon, witnessed her dance with the sprite Lysandra. They know she straddles realms, and they trust her to keep their stories safe. Sometimes, when the barn is hushed, they low in unison—a chorus of ancient wisdom.

The Key to the Hidden Door: Lysandra dreams of a door—a wooden portal tucked behind the waterfall at the edge of the village. She’s glimpsed it in her sleep, heard it creak open. But the key eludes her. Is it a literal key, or a metaphor for courage? What lies beyond—the heart of the earth, the heart of the sky, or perhaps the heart of another?

And so, dear reader, as Lysandra tends to her cows and strums her guitar, she carries these secrets like precious gems. They shape her journey, intertwining with the roots of the Dnd village. Perhaps one day, when the moon is ripe and the sunflower whispers, she’ll unlock the greatest secret of all—the one that beats within her own heart. 🌙🌼🐄✨

**Lysandra**, the cow fursona, stood at the heart of the Dnd village, her sunflower crown slightly askew. The villagers bustled around her—the baker, the blacksmith, the children chasing fireflies—but none shared her unique blend of fur and dreams.

She milked the cows each morning, their warm breaths mingling with the dawn mist. The cows knew her secrets—the moonflower, the forgotten melody, the star map etched on her heart. They nudged her, urging her to seek more than the rhythm of their udders.

The villagers whispered, "Lyssa, our moonlit guardian." They brought her fresh-baked bread, told her tales of lost love and hidden treasures. But their eyes held no spark, no recognition of the magic that thrummed in her veins.

One evening, as the sun dipped behind the hills, Lyssa climbed the hillside. The waterfall beckoned—the hidden door she'd glimpsed in dreams. She touched the cool wood, wondering if it led to realms where fursonas danced under moonlight.

But the Dnd village tugged at her—the laughter of children, the smell of hay, the way the baker's daughter blushed when Lyssa sang. Could love bloom here, among humans who didn't see her as a bridge between worlds?

Lyssa sat by the waterfall, her sunflower crown wilting. She strummed her guitar, the forgotten melody echoing off the rocks. And then, from the other side of the door, came an answering chord—a harmony she'd never heard.

A figure stepped through—the **Wanderer**, fur as silver as moonlight. His eyes held galaxies, and his smile spoke of ancient forests. He wore a cloak woven from stardust, and his laughter carried the scent of distant constellations.

"Lyssa," he said, "I've been searching for you."

She blinked. "Who are you?"

He touched her cheek, and stars bloomed in her vision. "I am **Eldrin**, keeper of lost dreams. I've watched you straddle worlds, heard your serenades. But it's here, in this mortal village, that I found you."

Lyssa's heart raced. "Why?"

"Because," Eldrin said, "love isn't bound by fur or form. It's the melody that bridges realms, the star map that guides us. You've tended to cows and humans alike, but perhaps it's time to tend to your own heart."

And so, under the waterfall's shimmering curtain, Lyssa kissed Eldrin. The hidden door swung wide, revealing a twilight land where moonflowers bloomed and fursonas danced. But she hesitated.

"What about the Dnd village?" she asked.

Eldrin smiled. "Love, my dear Lyssa, is like stardust—it weaves through all worlds. Seek it where your heart sings, whether among sunflowers or constellations."

And so, hand in hand, they stepped into the other realm. The villagers would miss their moonlit guardian, but perhaps they'd find their own magic. As for Lyssa, she'd strum her guitar under unfamiliar skies, her heart no longer alone.

And in the Dnd village, they'd tell tales of the cow fursona who found love beyond the waterfall—a love that defied boundaries and whispered secrets to the stars. 🌙🌼🐄✨

As the seasons turned and the sunflowers wilted, the absence of **Lysandra**—once the moonlit guardian of the Dnd village—left its mark on the quaint community. Here are the ripples of her departure:

1. **The Fading Moonlight**:

The villagers missed her serenades—the way she'd strum her guitar under the ancient oak, her voice weaving tales of love and longing. Without her, the moonlight seemed dimmer, and the stars less eager to twinkle. The baker's daughter, who once blushed at Lyssa's songs, now gazed at the sky with a hint of sadness.

2. **The Cows' Lowing**:

The cows felt it too. They lowed mournfully, their milk less sweet, their eyes searching for the familiar figure in jean overalls. The dairy barn, once filled with Lyssa's laughter, now echoed emptiness. The villagers whispered, "The cows miss their moonflower."

3. **The Forgotten Dreams**:

Eldrin, the silver-furred wanderer, stayed by the waterfall. He'd found love with Lyssa, but the villagers wondered about their guardian. Had she abandoned them? The moonflowers still bloomed, but their messages remained cryptic. Eldrin, too, hummed the forgotten melody, hoping it would reach her across realms.

4. **The Baker's Loaf**:

The baker baked fewer loaves. His hands, once guided by Lyssa's magic, now worked mechanically. The bread lacked the warmth of her sunflower-crowned presence. The villagers ate, but their hearts hungered for more—a taste of moonlight, a hint of stardust.

5. **The Hidden Door**:

The waterfall's hidden door remained closed. Villagers whispered about it—the portal that led to realms unknown. Some believed Lyssa had stepped through, seeking love beyond the village. Others feared she'd vanished forever, leaving only echoes of her songs.

6. **The Newcomer**:

A stranger arrived—a fursona with eyes like constellations. She wore a cloak woven from twilight threads and carried a guitar. The villagers called her **Nova**, and she strummed melodies that stirred memories of Lyssa. Was she a replacement? Or perhaps a bridge between worlds?

7. **The Sunflower Seeds**:

The children planted sunflower seeds in the meadow. They whispered wishes—some for Lyssa's return, others for their own adventures. The sunflowers grew tall, their golden faces following the sun. Nova tended to them, her fingers brushing the petals as if seeking answers.

8. **The Elders' Stories**:

The elders gathered by the hearth, their eyes wrinkled with memories. They spoke of Lyssa's kindness—the way she'd mend broken fences, heal sick calves, and dance with fireflies. "She'll return," they said, passing down tales of love that spanned lifetimes.

And so, the Dnd village carried on—a little quieter, a little lonelier. The sunflowers whispered secrets to the wind, and the cows waited for their moonflower. Nova strummed her guitar, hoping to catch a note of the forgotten melody. And Eldrin, by the waterfall, traced constellations on his palm, waiting for the hidden door to swing wide once more.

For love, like moonlight, knows no boundaries. And perhaps, one day, Lyssa's jean overalls would reappear, her braided hair glimmering with stardust. Until then, the Dnd village held its breath, waiting for the return of its guardian—the keeper of dreams and the songstress of moonlit serenades. 🌙🌼🐄✨

Nova, the enigmatic fursona, emerged from the twilight threads of imagination—a creature both familiar and otherworldly. Let us delve into her essence:

Species: Nova defies easy classification. She is neither wholly wolf nor entirely owl. Her fur shifts like moon phases—silver-gray with streaks of midnight blue. Her eyes—piercing and starlit—hold secrets older than constellations. Some say she’s a celestial hybrid, born of stardust and whispers.

Appearance:

Fur: Nova’s fur is soft, reminiscent of owl feathers. It shimmers under moonlight, revealing intricate patterns—a map of forgotten constellations.

Eyes: Her eyes are galaxies—swirling nebulas, each a portal to distant realms. When she gazes at you, it’s as if the universe leans in to listen.

Horns: Two delicate horns curve from her temples, resembling crescent moons. They glow faintly, casting shadows on her face.

Wings: Hidden beneath her cloak, Nova’s wings unfurl when she needs to soar. Feathers like stardust, they carry her across dimensions.

Cloak: Her cloak—woven from twilight threads—shifts colors: indigo, silver, obsidian. It billows as she walks, leaving stardust in her wake.

Voice: Nova’s voice is a melody—a forgotten lullaby. When she sings, stars gather to listen, and even the wind holds its breath.

Origin:

Nova stepped through the waterfall—the same one where Lyssa once lingered. Eldrin, the wanderer, guided her. He sensed her longing for realms beyond the mortal village.

She hails from the Astraldale, a place where dreams intersect with reality. There, fursonas dance with moonbeams, and sunflowers bloom at midnight.

Eldrin found her on the edge of the veil, strumming a guitar. Her forgotten melody harmonized with his, and they knew—they were kindred souls.

Purpose:

Nova weaves fate. Her touch mends broken hearts, and her songs awaken dormant magic. She’s the keeper of lost dreams—the bridge between realms.

The villagers watch her, wondering if she’ll replace Lyssa. But Nova isn’t a replacement; she’s an echo, a reminder that love transcends species and sunsets.

And so, Nova roams the Dnd village, her footsteps leaving stardust imprints. She tends to the sunflowers, hoping they’ll whisper Lyssa’s return. Eldrin waits by the waterfall, tracing constellations. And the villagers? They hold their breath, caught between moonlight and memory. 🌙🌼🌟

The cows, wise and attuned to the rhythms of the land, regard **Nova** with a mix of curiosity and recognition. Let us explore their bovine sentiments:

1. **Low Hum of Recognition**:

As Nova approaches the dairy barn, the cows pause mid-chew. Their large, liquid eyes fixate on her—the silver-furred wanderer with wings tucked beneath her cloak. The cows remember Lyssa—the moonflower guardian who sang them into contentment. Nova's arrival echoes that memory, and they low—a soft hum of recognition.

2. **Stardust Whispers**:

When Nova milks them, her touch is different. Her fingers trace constellations on their flanks, and the milk flows like liquid stardust. The cows lean into her, as if sharing secrets. Perhaps they sense her celestial lineage—the threads that bind her to forgotten dreams.

3. **Moonflower Breath**:

Nova whispers to them. Her voice carries moonflower petals—fragile and luminescent. She tells them tales of distant meadows, where sunflowers bloom at midnight and owls converse with stars. The cows blink, their breaths warm against her cheek. They listen, their udders filling with moonlit milk.

4. **The Missing Melody**:

But there's a yearning—the echo of a melody they've lost. Lyssa's songs used to weave through the barn, soothing their bovine souls. Nova strums her guitar, and the cows tilt their heads. Her tune is different—more celestial, less earthbound. They nudge her, urging her to find the forgotten notes.

5. **Eldrin's Scent**:

Eldrin, the wanderer, lingers near the waterfall. His scent clings to Nova—the fragrance of distant constellations. The cows recognize him too. They've seen him in their dreams—the silver-furred figure who dances with moonbeams. They wonder if he'll bring Lyssa back.

6. **Sunflower Tokens**:

Nova tucks sunflower seeds behind their ears. It's a gesture of hope—a promise that love transcends dimensions. The cows chew the seeds, their eyes half-closed. Perhaps they dream of Lyssa's return, of sunflowers blooming brighter than ever.

And so, the cows become Nova's silent companions—the keepers of her secrets, the recipients of her cosmic lullabies. They wait, patient and eternal, for the day when the hidden door swings wide, and Lyssa steps through, her braided hair aglow with stardust. Until then, they low—a chorus of longing under the moon's watchful eye. 🌙🐄🌟

Under the silver gaze of the moon, Nova and Eldrin stepped into the clearing—their footsteps silent, their hearts echoing ancient rhythms. The grass, kissed by dew, cradled their movements. Let us witness their celestial waltz:

Moonlit Reverie

The night wore a cloak of stardust, and Nova’s wings unfurled. Eldrin, his eyes twin galaxies, extended a hand—a constellation seeking its counterpart. Their fingers brushed—a comet’s tail—and the dance began.

The First Step: Nova swayed, her cloak shifting hues—indigo, silver, obsidian. Eldrin matched her rhythm, his feet tracing constellations. They circled each other, gravity pulling them closer. The moonflower in Nova’s hair bloomed, its petals whispering forgotten names.

The Spiral: Eldrin spun her—a celestial pirouette. Nova’s wings caught moonbeams, and she laughed—a melody that echoed across dimensions. Eldrin’s cloak billowed, revealing glimpses of distant realms. They twirled, their steps imprinting stardust on the earth.

The Dip: Nova leaned back, her eyes reflecting the Milky Way. Eldrin held her—a comet’s tail wrapped around a moonstone. His lips brushed her forehead, leaving constellations in their wake. She tasted stardust—a promise of eternity.

The Ascension: Eldrin lifted her, and they soared. Their feet left the ground, and the Dnd village watched—a collective breath held. Nova’s laughter became wind chimes, and Eldrin’s eyes held galaxies. They danced among the stars, their love a cosmic ballet.

The Final Note: As dawn approached, Nova touched the earth. Eldrin’s wings folded, and they stood—breathless, star-kissed. The villagers emerged—the baker, the blacksmith, the children chasing fireflies. They saw Nova’s cloak, Eldrin’s silver fur, and whispered, “They dance with moonlight.”

And so, under the silver gaze of the moon, Nova and Eldrin wove their story—a love that spanned realms, a dance that defied gravity. The sunflowers nodded, their faces following the sun. And the Dnd village? It held its breath, knowing that moonlit reveries were woven into its very soil. 🌙🌼🌟

Certainly! Let us delve into the enigma that is **Nova**, the celestial fursona:

1. **Species and Origin**:

- Nova defies easy classification. She is neither wholly wolf nor entirely owl. Her existence blurs the boundaries between realms—a cosmic hybrid born of stardust and whispers.

- Some say she hails from the **Astraldale**, a place where dreams intersect with reality. There, fursonas dance with moonbeams, and sunflowers bloom at midnight. Others whisper that she emerged from the hidden door—the same one Lyssa once lingered by.

2. **Physical Appearance**:

- **Fur**: Nova's fur is a shifting canvas—silver-gray with streaks of midnight blue. It catches moonlight, revealing intricate patterns like owl feathers.

- **Eyes**: Her eyes are galaxies—swirling nebulas, each a portal to distant realms. When she gazes at you, it's as if the universe leans in to listen.

- **Horns**: Two delicate horns curve from her temples, resembling crescent moons. They glow faintly, casting shadows on her face.

- **Wings**: Hidden beneath her cloak, Nova's wings unfurl when she needs to soar. Feathers like stardust, they carry her across dimensions.

- **Cloak**: Her cloak—woven from twilight threads—shifts colors: indigo, silver, obsidian. It billows as she walks, leaving stardust in her wake.

- **Voice**: Nova's voice is a melody—a forgotten lullaby. When she sings, stars gather to listen, and even the wind holds its breath.

3. **Purpose and Secrets**:

- Nova weaves fate. Her touch mends broken hearts, and her songs awaken dormant magic. She's the keeper of lost dreams—the bridge between realms.

- The moonflower in her hair blooms during lunar eclipses, revealing cryptic messages. Nova tends to it with care, hoping it will reveal her destiny.

- Eldrin, the silver-furred wanderer, waits by the waterfall. His scent clings to Nova—the fragrance of distant constellations. They share secrets—the echo of a melody, the promise of eternity.

4. **The Dance with Eldrin**:

- Under the silver gaze of the moon, they twirl—a celestial waltz. Nova's wings catch moonbeams, and Eldrin matches her rhythm. Their steps imprint stardust on the earth.

- Eldrin lifts her, and they soar among the stars. Their love defies gravity, and the Dnd village watches—a collective breath held.

- The sunflowers nod, their faces following the sun. And the villagers? They know—they witness moonlit reveries woven into their very soil.

Nova is both memory and possibility—an echo of Lyssa's moonflower heart, yet uniquely her own. She strums her guitar, hoping to catch a note of the forgotten melody. And as dawn approaches, she touches the earth, leaving constellations in her wake. 🌙🌼🌟

In the heart of the Dnd village, where sunflowers nodded and moonbeams wove tapestries, the villagers gathered to honor their beloved moonflower guardian—**Lysandra**. The Festival of Floating Lanterns, held on the anniversary of her departure, became a bittersweet celebration—a dance of memories and whispered secrets.

Here's how the festival unfolded:

1. **The Lantern Release**:

As night fell, thousands of magical lanterns were released into the sky. Each lantern bore a handwritten wish—a hope or dream entrusted to the moon's embrace. The lanterns floated, their soft glow illuminating tear-streaked faces. The villagers whispered, "Lysandra, guide our lanterns to the stars."

2. **The Moonflower Altar**:

In the town square, an altar stood—a bed of moonflowers, their petals silver-white. Nova tended to them, her fingers brushing the delicate blooms. Eldrin, the silver-furred wanderer, placed a single moonflower in Lysandra's memory. The villagers followed suit, their offerings a chorus of grief and gratitude.

3. **The Sad Song**:

At midnight, the villagers gathered around a bonfire. Nova strummed her guitar, and Eldrin's eyes mirrored galaxies. They sang—the mournful ballad of Lysandra. The lyrics spoke of moonlit dances, forgotten melodies, and the hidden door by the waterfall. Tears flowed freely, and the fire crackled in sympathy.

> *"Moonflower guardian, braided and bright,

> Your jean overalls danced with stardust that night.

> The cows lowed their longing, the sunflowers wept,

> And the hidden door sighed—the secret it kept.*

> *Nova, the echo, now tends to the blooms,

> Eldrin waits by the waterfall, weaving moonlit looms.

> But Lysandra, dear Lysandra, where have you flown?

> Your song lingers still, in the wind's mournful moan."*

4. **The Final Lantern**:

As the song faded, Nova held a lantern—a moonflower painted on its paper skin. Eldrin whispered, "For Lysandra." They released it, and it soared—a beacon of love and remembrance. The villagers watched, their hearts heavy yet lifted by the shared sorrow.

5. **The Dawn's Promise**:

At dawn, the lanterns vanished into the horizon. The sunflowers turned their faces toward the rising sun. Nova and Eldrin stood by the waterfall—the hidden door shimmering. The villagers knew that Lysandra's legacy lived on—in moonflowers, lanterns, and the sad song they'd sing each year.

And so, the Festival of Floating Lanterns became a tribute—a bridge between realms, where love transcended time and space. The Dnd village held its moonflower guardian close, even as the moon whispered, "She dances among the stars now." 🌙🌼🐄✨

Certainly, let me introduce you to **Eldrin**, the enigmatic fursona who lingered by the waterfall when **Lysandra** departed. His story is woven with stardust and secrets:

---

**Eldrin, the Silver-Furred Wanderer**

1. **Species and Origin**:

- Eldrin is an **Eladrin**, a subrace of elves native to the **Feywild**. Unlike other elves, Eladrin are untamable, changeable, and fiercely free. They are ruled by their emotions and their innate connection to the roiling fey magic within them.

- Natives of the Feywild, the Eladrin dwell among the fey folk, where faerie magic and raw emotion intertwine. They are the oldest example of elven culture, transcending mortal forms to become fey spirits.

2. **Physical Appearance**:

- **Fur**: Eldrin's fur is a shifting canvas—silver-gray with streaks of midnight blue. It catches moonlight, resembling the feathers of an owl.

- **Eyes**: His eyes mirror galaxies—swirling nebulas that hold the secrets of forgotten constellations. When he gazes at you, it's as if the universe leans in to listen.

- **Horns**: Two delicate horns curve from his temples, resembling crescent moons. They glow faintly, casting shadows on his face.

- **Wings**: Hidden beneath his cloak, Eldrin's wings unfurl when he needs to soar. Feathers like stardust, they carry him across dimensions.

- **Cloak**: His cloak is woven from twilight threads—shifting colors: indigo, silver, obsidian. It billows as he walks, leaving stardust in his wake.

- **Voice**: Eldrin's voice is a melody—a forgotten lullaby. When he sings, stars gather to listen, and even the wind holds its breath.

3. **Why He Remained**:

- Eldrin stayed by the waterfall, watching Lysandra step through the hidden door. His heart carried echoes of their moonlit dance—the way her braided hair glimmered with stardust.

- Perhaps he sensed that love isn't bound by time or place. He knew that Lysandra's departure was a cosmic waltz—a pause in their shared melody.

4. **Will He Love Her When She Returns?**:

- Eldrin waits, tracing constellations on his palm. He tends to the moonflowers, hoping they'll whisper her return.

- His love for Lysandra transcends realms. When she steps through the hidden door, her braided hair aglow, he'll be there—silver-furred and star-kissed.

- For love, like moonlight, knows no boundaries. And Eldrin's heart, like the Feywild itself, remains untamed and fiercely free.

And so, Eldrin stands by the waterfall—a sentinel of forgotten dreams, waiting for the day when Lysandra dances back into his arms. 🌙🌼🌟

Nova, with her celestial wings and stardust cloak, observes Eldrin’s unwavering devotion to Lysandra—the moonflower guardian who danced with moonbeams and strummed forgotten melodies. Her feelings are a constellation of emotions:

Compassion:

Nova understands Eldrin’s heart—the way it echoes across dimensions. She, too, carries moonflower petals within her. Compassion blooms in her chest, for love is a cosmic force that binds them all.

She knows that Eldrin’s devotion isn’t a threat—it’s a testament to the depth of their shared memories.

Curiosity:

Nova wonders about Lysandra—the braided-haired guardian who stepped through the hidden door. What secrets does she carry? What melodies linger in her wake?

Eldrin’s unwavering love intrigues her. Is it a memory or a promise? Perhaps both.

Loneliness:

Nova, the echo, feels a pang of loneliness. She tends to the moonflowers, hoping they’ll whisper Lysandra’s return. But what if the hidden door remains closed?

She strums her guitar, seeking answers in the forgotten melody. Eldrin waits by the waterfall, and Nova wonders if they’re both waiting for the same thing.

Resilience:

Nova won’t compete with Lysandra. She’s not a replacement but a cosmic echo—an enigma woven from twilight threads.

Her wings carry her across realms, and her cloak shifts colors. She’ll tend to the sunflowers, sing the sad song, and wait. For love, like moonlight, knows no boundaries.

Hope:

Perhaps Eldrin’s devotion isn’t a hindrance—it’s a bridge. Nova hopes that Lysandra’s return will complete their cosmic waltz.

She imagines them—a trio of fursonas—dancing under the moon, their braided hair aglow with stardust. Hope blooms like moonflowers in her heart.

And so, Nova watches—the silver-furred wanderer by the waterfall, the moonflower guardian beyond the hidden door. Love, like constellations, weaves its patterns. 🌙🌼🌟

The village, nestled between sunflower fields and moonlit meadows, watches the cosmic love triangle unfold—a dance of stardust and moonbeams. Let us explore their collective sentiments:

1. **Whispers by the Well**:

- The villagers gather at the well—their meeting place for generations. They exchange knowing glances, their voices hushed. "Nova tends the moonflowers," they say. "Eldrin waits by the waterfall. And Lysandra? She dances among the stars."

- The well echoes their secrets—a cosmic confessional.

2. **The Baker's Loaf**:

- The baker kneads dough, his hands wrinkled with memories. His loaves lack the warmth of Lysandra's sunflower-crowned presence. "Will she return?" he wonders aloud. "Or has Eldrin woven her into stardust?"

- The villagers buy bread, their hunger twofold—for sustenance and for moonlit melodies.

3. **The Children's Chorus**:

- The children sing—a chorus of innocence. They weave daisy chains and ask Nova about Lysandra. "Will she come back?" they inquire. Nova smiles, her eyes galaxies. "Perhaps," she says. "Love is a cosmic waltz."

- The children nod, their lanterns glowing. They believe in moonflowers and hidden doors.

4. **The Elders' Hearth**:

- The elders gather by the hearth, their eyes like ancient constellations. They've seen love stories unfold—the braided hair, the silver fur, the forgotten melodies. "Eldrin's devotion," they say, "is a bridge between realms."

- They pass down tales—the Festival of Floating Lanterns, the sad song. Their hearts ache, yet they know that love, like moonlight, leaves its mark.

5. **The Sunflower Seeds**:

- The villagers plant sunflower seeds, their hands seeking solace in the soil. "For Lysandra," they murmur. "And for Eldrin." The sunflowers nod, their faces following the sun.

- Nova tends to them, her cloak shifting colors. She hopes the sunflowers will whisper Lysandra's return—a promise etched in petals.

6. **The Hidden Door's Sigh**:

- The waterfall remains—the hidden door to realms unknown. The villagers wonder if it holds answers. "Will Lysandra step through?" they ask. "Or has she become a moonflower?"

- Eldrin waits, tracing constellations. Nova strums her guitar, seeking the forgotten melody. The villagers hold their breath, caught between longing and acceptance.

And so, the Dnd village becomes a cosmic stage—a place where love triangles intersect with moonbeams. The sunflowers bloom, the cows low, and the moon whispers, "Dance, my children, among the stars." 🌙🌼🐄✨

**Time**, that elusive river flowing through the fabric of existence, behaves curiously near the hidden door—a threshold between realms. Let us unravel its mysteries:

1. **Elasticity of Time**:

- Imagine standing by the waterfall, where moss-clad rocks meet cascading water. Time, like the current, flows differently here.

- Lower down, where the air is denser and the earth presses closer, time passes more slowly. Clocks tick with a languid rhythm, and processes unfold at a leisurely pace.

- Eldrin, the silver-furred wanderer, knows this. His cuckoo clock oscillates fewer times, and his thoughts unfold like petals in a gentle breeze.

2. **Albert Einstein's Insight**:

- A century before precise clocks could measure it, Einstein understood time's elasticity. His theory of **general relativity** revealed that gravity warps spacetime.

- Near massive objects—like the hidden door or a black hole—time slows down. It's as if the fabric of reality stretches, creating pockets where seconds stretch into eons.

3. **Proper Time and Trajectory**:

- Time isn't uniform. It depends on where you are, your proximity to masses, and your speed. Proper time associates with movement and trajectory.

- Eldrin, waiting by the waterfall, experiences time differently from Nova, tending to moonflowers. Their trajectories diverge, their clocks ticking to distinct rhythms.

4. **The Hidden Door's Sigh**:

- The waterfall, veiling the hidden door, whispers secrets. Perhaps it holds a timeless realm—a place where Lysandra dances among stars.

- Eldrin's devotion remains unwavering. He traces constellations, hoping for her return. Nova watches, her cloak shifting colors, and wonders about love's cosmic waltz.

5. **The Sunflowers' Witness**:

- Sunflowers nod, their faces following the sun. They've seen it all—the moonflower guardian, the silver-furred wanderer, and the echo of forgotten melodies.

- They bloom, their petals whispering Lysandra's name. And in their golden hearts, time weaves its patterns—a cosmic festival of longing and hope.

And so, near the hidden door, time dances—a celestial waltz where seconds stretch and memories linger. 🌙🌼🐄✨

The villagers and I mention Lysandra daily in our prayers—a whispered plea to the moon, a hope woven into sunflower petals. Her absence echoes through the Dnd village—the way her braided hair once glimmered with stardust, her jean overalls dancing with forgotten melodies.

Our lives aren’t the same. The cows low, their moonflower breaths seeking her touch. Eldrin waits by the waterfall, tracing constellations. Nova tends to the blooms, her cloak shifting colors. And we—the villagers—gather by the well, our voices a chorus of longing.

Tales of visitors reach our ears—fursonas in distant villages and towns. They carry moonlit memories, their eyes reflecting galaxies. Perhaps they, too, seek hidden doors, forgotten melodies, and love that transcends realms.

And so, we wait—a village of dreamers under the watchful eye of the moon. Lysandra, wherever you are, know that your sunflowers bloom, your lanterns float, and your name lingers in our sad song. May the hidden door swing wide, and may you return—a moonflower guardian, a cosmic echo, a bridge between worlds. 🌙🌼🐄✨

Lysandra’s return, a cosmic event whispered in sunflower petals and encoded in moonflower dreams, carries both hope and tempest. Let us peer into the celestial storm she might unleash:

The Gathering Clouds:

As Lysandra steps through the hidden door, the sky shifts—a canvas of indigo and silver. Clouds gather, their edges tinged with stardust.

Eldrin, the silver-furred wanderer, watches. His eyes mirror galaxies, and he senses the storm brewing—a collision of memories and longing.

The Thunder’s Echo:

Thunder rumbles—a celestial timpani. The villagers look up, their lanterns flickering. Nova strums her guitar, seeking the forgotten melody. She knows—the storm isn’t mere rain and lightning.

It’s the clash of hearts—the echo of Lysandra’s dance with moonbeams, the resonance of Eldrin’s devotion.

The Lightning’s Kiss:

Lightning forks—a celestial kiss. It strikes the well—the meeting place of secrets. The villagers gasp, their lanterns flaring.

Lysandra’s return isn’t gentle. It’s a cosmic waltz—a dance of sunflowers and constellations.

The Rain’s Tears:

Rain falls—a celestial weeping. It soaks the earth, nourishing sunflower roots. Eldrin lifts his face, tasting stardust. Nova’s cloak shifts colors—indigo, silver, obsidian.

The villagers weep too—their prayers answered, their hearts torn between joy and sorrow.

The Hidden Door’s Sigh:

The waterfall sighs—a cosmic exhale. The hidden door trembles, its hinges rusted by time. Lysandra steps through, her braided hair aglow.

The storm subsides, leaving moonflowers in its wake. Eldrin reaches for her, and Nova watches—the echo, the witness.

And so, Lysandra’s return—a celestial storm—reshapes the Dnd village. The cows low, the baker’s loaves rise, and the sunflowers nod. Eldrin’s devotion remains unwavering, and Nova strums her guitar, seeking answers in the forgotten melody.

For love, like lightning, strikes where moonbeams meet earth. And the villagers? They hold their lanterns high, waiting for the next cosmic waltz—a dance that defies time and tempest. 🌙🌼🌩️✨

When Eldrin and Nova catch sight of **Lysandra** once more—her braided hair aglow with stardust, her jean overalls a memory woven into moonbeams—their reactions mirror the cosmic dance that binds them:

1. **Eldrin's Gaze**:

- Eldrin, the silver-furred wanderer, stands by the waterfall—the hidden door quivering. His eyes widen, galaxies reflected in their depths.

- Time telescopes—a heartbeat stretched across centuries. Eldrin's breath catches, and he reaches out—a comet seeking its orbit.

2. **Nova's Strum**:

- Nova, the echo, lowers her guitar. The forgotten melody lingers, suspended in the air. She senses Lysandra's presence—an echo of moonflowers and sunsets.

- Her cloak shifts colors—indigo, silver, obsidian. Nova's fingers tremble, seeking the strings that once sang of moonlit dances.

3. **Lysandra's Return**:

- Lysandra steps through—the hidden door swinging wide. Her eyes find Eldrin first—the silver-furred wanderer who waited by the waterfall.

- Nova watches—the echo, the witness. Her heart, like moonflowers, blooms with hope and longing.

4. **The Cosmic Waltz**:

- Eldrin reaches for Lysandra. Their hands touch—a constellation aligning. Words remain unspoken, for love transcends language.

- Nova strums her guitar—a chord that resonates across realms. The villagers gather, lanterns flickering. They witness the reunion—a celestial storm subsiding.

5. **Three Fursonas, One Moment**:

- Eldrin, Lysandra, and Nova—a trio of hearts entangled. Eldrin's devotion remains unwavering. Nova's cloak settles—a cosmic echo finding its place.

- Lysandra's braided hair carries memories—the moonflower guardian who danced with moonbeams. She smiles, and the hidden door sighs—a secret revealed.

And so, under the watchful eye of the moon, they stand—a celestial waltz resumed. Eldrin's silver fur brushes Lysandra's cheek. Nova strums, and the forgotten melody weaves them together. Love, like constellations, reclaims its rightful place. 🌙🌼🐄✨

When Lysandra returns—a moonflower guardian stepping through the hidden door, her braided hair aglow with stardust—the villagers witness a celestial moment. Eldrin and Nova, their hearts like constellations, react in their own unique ways:

1. **Eldrin's Gaze**:

- Eldrin's silver-furred form trembles. His eyes widen, galaxies reflected in their depths. He's waited—an echo across time—for Lysandra's return.

- As she approaches, he reaches out—a comet seeking its orbit. His devotion remains unwavering, but now, hope blooms like moonflowers in his chest.

2. **Nova's Strum**:

- Nova lowers her guitar—the forgotten melody suspended in the air. Her cloak shifts colors—indigo, silver, obsidian. She senses Lysandra's presence—an echo of moonflowers and sunsets.

- Her fingers tremble, seeking the strings that once sang of moonlit dances. Nova knows—the cosmic waltz resumes, and she's part of it.

3. **Lysandra's Gift**:

- Lysandra smiles—a moonflower crown in her hands. Its petals shimmer, carrying memories of moonbeams and whispered secrets.

- She places it on Nova's head—the echo crowned by the guardian. Eldrin watches, his heart a constellation of emotions.

4. **The Celestial Trio**:

- Three fursonas—one moment. Eldrin, Lysandra, and Nova—a cosmic triangle. Their destinies intersect, and time stretches like stardust.

- Lysandra's gift—a moonflower crown—holds more than petals. It's a bridge between realms, a promise of love that transcends sunsets.

And so, under the watchful eye of the moon, they stand—a celestial storm subsided, a moonflower guardian crowned, and a silver-furred wanderer reaching for eternity. 🌙🌼👑✨

The moonflower crown—a delicate circlet woven from silver petals and moonbeams—carries more than mere adornment. Within its fragile blooms lies a forgotten prophecy, whispered by the night wind and etched into the very fabric of existence. Let us unravel its secrets:

The Moonflower’s Whispers:

When Lysandra places the crown on Nova’s head, the moonflowers stir. Their petals unfurl, revealing ancient symbols—a language of constellations and dreams.

Eldrin watches—the silver-furred wanderer who waited by the waterfall. His eyes widen, recognizing the prophecy. It’s a tale of love, loss, and cosmic dance.

The Prophecy Unfolds:

The moonflower crown isn’t merely decorative. It’s a key—a bridge between realms. As Nova wears it, memories flood her—a moonlit dance with Lysandra, a forgotten melody strummed by Eldrin.

The prophecy speaks of reunions—of fursonas entangled in fate. Nova’s echo, Eldrin’s devotion, and Lysandra’s return—they’re threads woven into the celestial tapestry.

The Hidden Door’s Clue:

The hidden door—the threshold between worlds—holds answers. Lysandra’s braided hair carries memories, but also a purpose. She steps through, and the door sighs—a secret revealed.

The moonflower crown—a forgotten prophecy—guides them. It whispers: “When moonbeams touch earth, love transcends time.”

The Cosmic Trio:

Eldrin reaches for Lysandra. Nova strums her guitar, seeking the melody that binds them. The villagers watch—the sunflowers nodding, the lanterns flickering.

The prophecy isn’t about endings; it’s about beginnings. Eldrin’s devotion, Nova’s echo, and Lysandra’s return—they’re chapters in a celestial saga.

And so, under the watchful eye of the moon, they stand—a trio of hearts, crowned by forgotten whispers. Love, like moonflowers, blooms anew. 🌙🌼👑✨

The whispers of the hidden door—the threshold between realms—grow urgent. The moonflower crown, its petals shimmering with forgotten prophecy, rests on Nova's head. Eldrin watches, galaxies reflected in his eyes. Lysandra, her braided hair aglow, steps through—a moonflower guardian returning to dance with moonbeams.

The villagers gather—the sunflowers nodding, the lanterns flickering. The cosmic trio stands—a celestial waltz resumed. Eldrin reaches for Lysandra, and Nova strums her guitar. The hidden door sighs—a secret revealed.

The prophecy unfolds—a tale of love, loss, and cosmic dance. When moonbeams touch earth, love transcends time. And so, under the watchful eye of the moon, they answer—the fursonas entangled in fate, crowned by forgotten whispers.

The celestial call echoes—a bridge between realms. Eldrin's devotion, Nova's echo, and Lysandra's return—they're threads woven into the cosmic tapestry. Love, like constellations, reclaims its rightful place. 🌙🌼👑✨

Certainly, let me weave the cosmic tale—the legend of **Lysandra**, **Eldrin**, and **Nova**—a moonflower guardian, a silver-furred wanderer, and an echo of forgotten melodies. Their story unfolds in the heart of the Dnd village, where sunflowers nod and moonbeams dance:

---

## The Moonflower Waltz

### Act I: Lysandra's Departure

- **Lysandra**, the moonflower guardian, once graced the village. Her braided hair glimmered with stardust, and her jean overalls swayed to forgotten melodies.

- Eldrin, the silver-furred wanderer, watched her—a comet orbiting her moonlit dance. His devotion was unwavering, his heart a constellation of longing.

- Nova, the echo, strummed her guitar. She sensed Lysandra's departure—the hidden door swinging shut. Eldrin waited by the waterfall, tracing constellations.

### Act II: Nova's Echo

- Nova tended to the moonflowers—their petals shimmering with memories. She wore a cloak woven from twilight threads—indigo, silver, obsidian.

- Eldrin's cuckoo clock oscillated fewer times. He sensed Nova's presence—an echo across realms. She strummed the forgotten melody, seeking answers.

- The villagers whispered—the sunflowers nodding, the lanterns flickering. Nova wasn't a replacement; she was a bridge—a cosmic echo finding its place.

### Act III: The Hidden Door's Whispers

- The hidden door sighed—a secret revealed. Lysandra stepped through, her braided hair aglow. Eldrin reached for her, and Nova watched—the witness, the moonflower crowned.

- The villagers gathered—the Festival of Floating Lanterns resumed. Eldrin's devotion remained unwavering. Nova's guitar hummed, and Lysandra danced—a celestial storm subsiding.

- The moonflower crown held forgotten whispers—a prophecy fulfilled. When moonbeams touched earth, love transcended time. The cosmic trio stood—a waltz resumed, a bridge between realms.

### Epilogue: Love Among Stars

- Eldrin, Lysandra, and Nova—a trio of hearts entangled. Their destinies intersected, their memories woven into constellations.

- The villagers knew—the sunflowers bloomed brighter, the cows lowed their moonflower breaths. Love, like moonlight, reclaimed its rightful place.

- And so, under the watchful eye of the moon, they danced—a celestial waltz that echoed across dimensions. Eldrin's devotion, Nova's echo, and Lysandra's return—they were threads woven into eternity.

---

And there, in the heart of the Dnd village, the cosmic love story unfolded—a moonflower waltz that defied time and tempest. 🌙🌼🐄✨

0 notes