I want to increase the min-width of the slds-tree_container as the text gets wrapped beyond a certain width.
<template>
<lightning-tree items={roleItems} class="" onselect={handleSelect} >
</lightning-tree>
</template>
Because of the new Shadow DOM styling in LWC I can't change the CCS style of the inner components (In this case slds-tree_container). Is there a way to set auto width ?
Normally for a web component, this would work
const treeElement = this.template.querySelector("lightning-tree");
let style = document.createElement("style");
style.innerHTML = ".slds-tree_container { min-width: 800px; }";
treeElement.shadowRoot.appendChild(style);
but because of lightning locker service accessing shadow dom is not allowed(which is a good thing) .
I would recommend extending the base component from here https://github.com/salesforce/base-components-recipes/tree/master/force-app/main/default/lwc/tree and adding custom css as needed
