Jan Miksovsky JanMiksovsky

## BasicWebComponentsArchitecture.js
Basic Web Components architecture
=================================

The project seeks to provide a comprehensive set of solid, well-designed web
components that implement very common user interface patterns.

Goals:
* Usability excellence
* Work in a wide variety of situations (Gold Standard)
* As functionally complete as possible

## bower.json
{
  "name": "issue-16",
  "version": "0.0.0",
  "dependencies": {
    "iron-pages": "PolymerElements/iron-pages",
    "paper-tabs": "PolymerElements/paper-tabs"
  }
}

## portStatus.dot
digraph G {

  // Dependency graph of Paper/Iron elements
  //
  // solid (default) lines = dependency
  // sotted lines = devDependency
  //
  // green = generally works under Polymer 2.0: unit tests pass, demo looks reasonable (except for styling)
  // yellow = some porting work has been done
  // gray = porting status unknown or not begun

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Custom styling example</title>

  <style id="customButtonStyle">
    #inner {
      background: white;

## 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:
      //

## 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";

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

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

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

  
## 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>
	Basic Web Components architecture
	=================================

	The project seeks to provide a comprehensive set of solid, well-designed web
	components that implement very common user interface patterns.

	Goals:
	* Usability excellence
	* Work in a wide variety of situations (Gold Standard)
	* As functionally complete as possible
	{
	"name": "issue-16",
	"version": "0.0.0",
	"dependencies": {
	"iron-pages": "PolymerElements/iron-pages",
	"paper-tabs": "PolymerElements/paper-tabs"
	}
	}
	digraph G {

	// Dependency graph of Paper/Iron elements
	//
	// solid (default) lines = dependency
	// sotted lines = devDependency
	//
	// green = generally works under Polymer 2.0: unit tests pass, demo looks reasonable (except for styling)
	// yellow = some porting work has been done
	// gray = porting status unknown or not begun
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Custom styling example</title>

	<style id="customButtonStyle">
	#inner {
	background: white;
	<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:
	//
	/**
	* 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.
	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>