adding example to explain :defined

chrisdavidmills · chrisdavidmills · commit 010c6f23ae23 · 2018-01-30T13:33:12.000Z
diff --git a/README.md b/README.md
@@ -3,6 +3,7 @@ A series of web components examples, related to the MDN web components documenta
 
 The following examples are available:
 
+* [defined-pseudo-class](defined-pseudo-class). A very simple example that shows how the <code>[:defined pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined)</code> works.
 * [element-details](element-details) — <code>&lt;element-details&gt;</code>. Displays a box containing an HTML element name and description. Provides an example of an autonomous custom element that gets its structure from a <code>&lt;template&gt;</code> element (that also has its own styling defined), and also contains <code>&lt;slot&gt;</code> elements populated at runtime. [See element-details live](https://mdn.github.io/web-components-examples/element-details/).
 * [expanding-list-web-component](expanding-list-web-component) — <code>&lt;ul is="expanding-list"&gt;</code>. Creates an unordered list with expandable/collapsible children. Provides an example of a customized built-in element (the class inherits from <code>HTMLUListElement</code> rather than <code>HTMLElement</code>). [See expanding-list live](https://mdn.github.io/web-components-examples/expanding-list-web-component/).
 * [life-cycle-callbacks](life-cycle-callbacks) — <code>&lt;custom-square l="" c=""&gt;</code>. A trivial example web component that creates a square colored box on the page. The demo also includes buttons to create, destroy, and change attributes on the element, to demonstrate how the [web components life cycle callbacks](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) work [See life-cycle-callbacks live](https://mdn.github.io/web-components-examples/life-cycle-callbacks/).
diff --git a/defined-pseudo-class/index.html b/defined-pseudo-class/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>:defined demo</title>
+    <script src="main.js" defer></script>
+    <style>
+      p {
+        background: yellow;
+      }
+
+      simple-custom {
+        background: cyan;
+      }
+
+      :defined {
+        font-style: italic;
+      }
+
+      simple-custom:not(:defined) {
+        display: none;
+      }
+
+      simple-custom:defined {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1><code>:defined</code> demo</h1>
+
+    <simple-custom text="Custom element example text"></simple-custom>
+
+    <p>Standard paragraph example text</p>
+
+  </body>
+</html>
diff --git a/defined-pseudo-class/main.js b/defined-pseudo-class/main.js
@@ -0,0 +1,12 @@
+customElements.define('simpl-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
