Jan Miksovsky JanMiksovsky

## 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.

## carousel.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix Carousel with closed shadow root</title>

    <link rel="stylesheet" href="https://component.kitchen/demos/demos.css" />
    <script type="module">
      import PlainCarousel from "https://component.kitchen/src/plain/PlainCarousel.js";

## styleableCarousel.html
<html>
  <head>
    <title>Styling a part in combination with a custom pseudo-class</title>
    <script type="module">

      // This code sample shows a hypothetical styleable carousel component
      // modeled after https://component.kitchen/elix/Carousel.
      //
      // This shows two related web component features which are desired:
      //
	<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.
	<html>
	<head>
	<title>Styling a part in combination with a custom pseudo-class</title>
	<script type="module">

	// This code sample shows a hypothetical styleable carousel component
	// modeled after https://component.kitchen/elix/Carousel.
	//
	// This shows two related web component features which are desired:
	//