szewczykmira / dina Goto Github PK

• use css variables;
• use flex (have no idea how it works);
• figure out a way to use shadow dom?

I have no idea how ts works right now so need to do research first.

I don't know if this should be done with docker or there are any more suitable ways for js/ts

fetch data from an api, and render them. Add search or pagination.
this might be ok: https://www.superheroapi.com

Problem
all styles must be kept in .ts files, but moving them to .css files would be great.
From what I gather, the issue is that ts doesn't know how to handle them and declaring the module is not everything that needs to be done.

• Research how to build CSS files using typescript
• see if web pack is somehow useful;
• look for tutorials that make it work without webpack;

As I’ve recently learned, shadowDom doesn’t allow us changing things directly. It would be great to use this in practice:

children.css

:host {
—background-colour: var(—colour-xyz)
}

.container {
Background-color:var(—background-color);
}

Parent.css

Children-component {
—background-color: #aaa
}

Add initial web components. Preferably create a list that renders some dummy data

https://www.kodingkitty.com/blog/blend-modes/

https://lit.dev/docs/templates/directives/#classmap