Lit 2: Questions

[busynest]

I would like to activate a boolean, when posts are greater than 0.

This works, but does not update the render:
<section ?data-on="${ this.posts < 0 ? true : false }">

[busynest]

<section ?data-on="${ ( this.posts < 3 ) ? true : false }">

[justinfagnani]

html`<section ?data-on=${ this.posts < 0 ? true : false }>`

should work. Is this.posts a reactive property?

[busynest]

Yes this.posts is reactive.

I have a feeling that everything works, There are many moving parts.
Possibly first database entry starts at 0, but I need to rebuild my submission to keep testing.
After more testing we will see what happens.

https://github.com/busynest/centre/blob/master/src/utilities/results.ts

on a side note, I now use "data-" for custom-properties that don't require the reactive setup, that only require to hold data or CSS purposes (if that makes sense).

[busynest]

@justinfagnani

I have found an HTML / JavaScript glitch.

• This works:
  .getAttribute('data-value')
<label data-value="profile">Profile</label>

• This does not work: --adding paragraph to label, stops getAttribute from getting data.
  .getAttribute('data-value')
<label data-value="profile"><p>Profile<p></label>

<label> is a nice click and focus tool, but having the <p> would have provided a nice click area.

[thescientist13]

I would caution against against putting just any tag inside a <label> from a general semantic HTML perspective, and likely the reason for the behavior you are seeing, Lit or otherwise.

Per MDN, only certain tags are recommended to be put inside a <label> ("phrasing content"), mainly for reasons of accessibility. If your only interest in using <p> is for the default block level styling, then it might be more pragmatic to pick one of the more appropriate semantic tags and use CSS to get the desired look and feel you want.

---

Also, as a general rule of HTML (IIRC) block level elements like <p> are not allowed inside inline elements, like <label>.

[busynest]

How to bind output of element, to input of another element? but rendered many times inside of a .map() ?

protected render() : TemplateResult { return html
${ this.bookmarks.map((bookmark: any) => html

        <select
          name="${ bookmark.userID }"
          @change="${(e : Event) => { this.changeAction(e); }}">
             <option data-name="${ bookmark.userID}" value="1">${bookmark.contractorName}</option>
        </select>

        <label for="${ bookmark.userID }-1" >View Profile</label>
        <input
            id="${ bookmark.userID }-1"
            type="radio"
            name="${ bookmark.userID }"
            value="1"
            @click="${(e : Event) => { this.doAction(e); }}"
            display="none"
          />

I tried to make a controller. it only worked 50% for a custom event.
but the custom Event only half worked for one configuration.
several things were in place for the controller to register things. it does work

[busynest]

Here is the outline
https://www.figma.com/file/H5oNAmlYRnvOKCExRPx1O4/Contractors?node-id=4%3A2

I guess my problem comes to the fact that somehow, I cannot use console.log('') within a controller. My entire controller crashes. so im left without being able to use console.log('') in a basic Class Module. weird. right?

[busynest]

@justinfagnani The controllers (Do work / Don't work) on some level..
For sure the event does work on some level in a specific controller configuration, but doesn't execute anything?
(controller works when +event, +eventListener, +type is used in argument method, +when responsive property is use in template, + constructor is first function)
related, console.log doesn't work within controller.

Maybe the controller's eventListener needs to accept an Object, but I pass a function. Because I use customEvent

Conclusion: eventListener needs native Event type passed into method, not custome event.
Example:
_onChange( { bookmarks } : searchState )
vs
_onChange( { clientX, clientY } : mouseEvent )

[busynest]

@justinfagnani
Maybe the abstract for controller has this problem:
The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security

class member = function constructor

[busynest]

I think this is getting me somewhere:

declare global {
  interface WindowEventMap {
    profile: CustomEvent
  }
}

[busynest]

My controller errors have something to do with overloads.
constructor signature: can take overloads,
constructor function: can’t have type parameters - these belong on the outer class declaration

[busynest]

somehow it all makes sense and almost works! exect for the requestUpdate !!!!!

[busynest]

the updated figma diagraph is fun. https://www.figma.com/file/H5oNAmlYRnvOKCExRPx1O4/Contractors?node-id=4%3A2