Jan Miksovsky JanMiksovsky

## launch.json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      // This configuration tells VS Code to launch the project via `npm start`.
      "type": "node",
      "request": "launch",

## writeFileString.js
import fs from "node:fs/promises";

// Create a 1MB string value to a file
const string = "a".repeat(1000000);
const startValue = performance.mark("string");
await fs.writeFile("1MB.txt", string);
const measureValue = performance.measure("write string value", startValue);
console.log(`${measureValue.name}: ${measureValue.duration}ms`);

// Write the string as a String object

## tenHundredWords.txt
a
able
about
above
accept
across
act
actually
add
admit

## index.html = this().ori
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Reviews</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>Reviews</h1>
    <div class="cards">

## reviewSite.yaml
# This is a trivial self-contained demo site built with Graph Origami.

reviews.yaml:
  - summary: Positive reinformement and insight.
    rating: 5
    location: Southampton, NY
    coach: Sue
    text: |
      Thanks for allowing me to talk things out. It makes it easier to get some
      clarity.

## site.yaml
index.html: |
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <link rel="stylesheet" href="styles/styles.css" />
    </head>
    <body>
      <h1>Home page</h1>

## abTest.meta
control:
  index.html: |
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" href="styles/styles.css" />
      </head>
      <body>

## elementReferences.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                JanMiksovsky
                / elementReferences.md
            
            
              Created
              February 10, 2021 19:16
            
              
                Exploring indirect AOM element references to bridge light/shadow DOM
              
          
    Indirect ARIA element references

This illustrates the possibility of indirecting AOM element references so that they work across shadows. The main ideas are:

Use custom element code to coordinate references light DOM and shadow DOM.
Ensure that AOM references can be indirected: if element A references B for a label, and B references C for a label, then A ends up getting its label from C.
Let the custom element host serve as an indirection point between the light and shadow DOM.
Define fallback AOM properties on elementInternals that are used if the corresponding properties are not set on the host. This lets a host reference elements in its own shadow without exposing those references.

Adapting a combo box example from Alice Boxhall.

  
## proof.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/gh/elix/elix@main/define/ListComboBox.js"
    ></script>

## StoryBrowser.js
/**
 * Lightweight demo/story browser in plain JavaScript, no dependencies.
 */

// Semi-private fields stored via Symbol keys on an element instance.
const defaultPathKey = Symbol();
const linksKey = Symbol();
const pathKey = Symbol();

// The template for the component's shadow tree.
	{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
	{
	// This configuration tells VS Code to launch the project via `npm start`.
	"type": "node",
	"request": "launch",
	import fs from "node:fs/promises";

	// Create a 1MB string value to a file
	const string = "a".repeat(1000000);
	const startValue = performance.mark("string");
	await fs.writeFile("1MB.txt", string);
	const measureValue = performance.measure("write string value", startValue);
	console.log(`${measureValue.name}: ${measureValue.duration}ms`);

	// Write the string as a String object
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>Reviews</title>
	<link rel="stylesheet" href="main.css" />
	</head>
	<body>
	<h1>Reviews</h1>
	<div class="cards">
	# This is a trivial self-contained demo site built with Graph Origami.

	reviews.yaml:
	- summary: Positive reinformement and insight.
	rating: 5
	location: Southampton, NY
	coach: Sue
	text: \|
	Thanks for allowing me to talk things out. It makes it easier to get some
	clarity.
	index.html: \|
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<link rel="stylesheet" href="styles/styles.css" />
	</head>
	<body>
	<h1>Home page</h1>
	control:
	index.html: \|
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<link rel="stylesheet" href="styles/styles.css" />
	</head>
	<body>
	/**
	* Lightweight demo/story browser in plain JavaScript, no dependencies.
	*/

	// Semi-private fields stored via Symbol keys on an element instance.
	const defaultPathKey = Symbol();
	const linksKey = Symbol();
	const pathKey = Symbol();

	// The template for the component's shadow tree.