ReactiveHTML css not loading

I am trying to wrap tagify (Tagify - Tags input Component) using a ReactiveHMTL component. The functionality works with no problems, but I can not get the CSS from this example from “Same with custom suggestions” (Tagify - Tags input Component) to apply (also codepen example

A minimal example trying to render a Tagify component with custom styling

import panel as pn
import param
import panel as pn

class Tagify(pn.reactive.ReactiveHTML):
    style = param.Parameter(
        .tags-look .tagify__dropdown__item{
            display: inline-block;
            vertical-align: middle;
            border-radius: 3px;
            padding: .3em .5em;
            border: 1px solid #CCC;
            background: #F3F3F3;
            margin: .2em;
            font-size: .85em;
            color: black;
            transition: 0s;

            .tags-look .tagify__dropdown__item--active{
            color: black;

            .tags-look .tagify__dropdown__item:hover{
            background: lightyellow;
            border-color: gold;

            .tags-look .tagify__dropdown__item--hidden {
                max-width: 0;
                max-height: initial;
                padding: .3em 0;
                margin: .2em 0;
                white-space: nowrap;
                text-indent: -20px;
                border: 0;

    _template = """
    <style type="text/css">
    <div id="container">
        <input id="myinput" name="tags" placeholder='write some tags' value='css, html, javascript'>


    _extension_name = "tagify"
    __javascript__ = [

    __css__ = [""]

    _scripts = {
        "render": """
      var tagify = new Tagify(myinput, {
      whitelist: ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III"],
      maxTags: 10,
      dropdown: {
        maxItems: 20,           // <- mixumum allowed rendered suggestions
        classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
        enabled: 0,             // <- show suggestions on focus
        closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected


tagify = Tagify()

How it should look according to the example

How it looks in my Panel app

I verified that I can modify some of the CSS attributes. For instance, I could change the min width of the tags , but others not (like in the example). I would like to understand if this is a user error.
My best guess it is related to javascript searching for “tags-look” (the
dropdown) elements, and failing because we are in the shadow dom.