https://github.com/bahrus/be-sharing

Share values from (enhancements of) the adorned element to other neighboring DOM (custom) elements, specializing in, but not limited to, microdata enhanced elements.
https://github.com/bahrus/be-sharing

Last synced: 2 months ago
JSON representation

Share values from (enhancements of) the adorned element to other neighboring DOM (custom) elements, specializing in, but not limited to, microdata enhanced elements.

• Host: GitHub
• URL: https://github.com/bahrus/be-sharing
• Owner: bahrus
• License: mit
• Created: 2023-02-18T13:59:39.000Z (over 2 years ago)
• Default Branch: baseline
• Last Pushed: 2024-08-20T00:44:02.000Z (10 months ago)
• Last Synced: 2025-03-25T01:38:36.992Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 392 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# be-sharing (🤝) [TODO]

```JavaScript

export class MedalCount extends HTMLElement{

    team = '',

    goldMedalCount = 0,

    silverMedalCount = 0,

    bronzeMedalCount = 0

}

customElements.define('medal-count', MedalCount);

```

```html

    

        

            Team

            Gold Medals

            Silver Medals

            Bronze Medals

        

    

    

        

            

            

            

        

    

```

What this does:

1.  Finds all itemprop attributed elements within its purview (table in this case)

2.  Once all browsers support scoping css, make sure we only go one level deep.

3.  For each such element it finds, create a sharing mechanism between the "hostish" of that element, specifically for the property name that matches the value of the itemprop attribute.  

4.  Note the non standard attribute itemscope=medal-count.  In the example above, because this enhancement builds on the MountObserver api, this will automatically attach a custom element with name "medal-count" via the non standard property "ish", which stands for itemscope host:

```JavaScript

oTR.ish = oMedalCountInstance 

```

If no parent itemscope attributed element is found that is either a custom element instance or that specifies a custom element name as above, then it will bind from the ShadowDOM root host.

> [!Note]

> This enhancement works best with browsers that support the @scope css selector.