Customize checkbox styles with ivh-treeview

Question

I am using angular-ivh-treeview to render a hierarchical checkbox list. It is working fine however I have trouble styling the checkboxes. If I am correct I have to use a custom template and then apply some ::before/::after styles to the label?

What I got so far is here, is this the right way to approach it? I am not sure how to set the id dynamically in the custom template so at the moment all nodes have the same id which only change the color of the first node.

Template:

template: [
      '<div class="custom-control custom-checkbox-primaryblue">',
      '<input type="checkbox" class="custom-control-input" id="12">',
      '<label  class="custom-control-label" for="12">',
      '{{::trvw.label(node)}}',
      '</label>',
      '</div>',
    ]

CSS

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;

}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;

}

.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;   
    background-color: yellow;
}

.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
}

.custom-checkbox-primaryblue .custom-control-label {
    outline: none;
    white-space: nowrap;
  position: relative;
    margin-bottom: 0;
    background-color: yellow;
}


.custom-control-input:checked + .custom-control-label::before {
  background-color:blue;
}