here is my full code : https://pastebin.com/aYQtaSy3

and question outside code but related is: how can i make a custom html element with a custom data-\* attribute having img link?

html is this:

```
<app-icon data-href="pinky-kde.gif"></app-icon><app-name>test</app-name>
```
yes i see `<app-name>` test content with no bugs, unlike `<app-icon>`.

like these codes do nothing at all:
```
    app-icon::before{
      display: inline-block;
      content:attr(data-href url);
    }
```

```
    app-icon{
      display: inline-block;
      content:attr(data-href url);
    }
```

```
    app-icon{
      display: inline-block;
      content:attr(data-href url);
	  max-height: auto;
	  max-width: auto;
	  height: 100%;
	  width: 100%;
    }
```
and this one displays url of image instead of image:
```
    :root{
     --icon: attr(data-href); 
    }
    app-icon::before{
      display: inline-block;
      content: var(--icon);
    }
```

any ideas? i think i tried half of regular stackoverflow without any result...