Styles are not working as expected with Bootstrap

[theomega]

I was toying around with alpinejs-component and some simple bootstrap styles and I'm running into the issues, that inside alpinejs components, the styles and their overwrites are not working as expected if styles="global" is used.

Check this simple Codepen that demos the problem: https://codepen.io/theomega/pen/JjVXjxG

The code tries to wrap a simple bootstrap button with the following classes inside a component:

<button type="button" class="btn btn-primary">Click Me</button>

while using styles="global" to get the Bootstrap styles copied over.

Notice, that in this case the background color of the button is lost somehow. Funnily, everything else still works, including the mouse over hover (with the correct color).

One workaround that I found is not using any styles on the x-component but rather copy the bootstrap css stylesheet link a second time and into the template of the component. Not idea, but at least works. I'm also opening this issue to document this.

Not sure where the issue lies here...

[markmead]

Looks like the issue comes from .btn overwriting some of the CSS .btn-primary has when used within a component.

I'm not too sure why that is happening.

[theomega]

Yep, I noticed this as well. I checked both Safari and Chrome (both on Mac OSX) and the behaviour is consistent.

[markmead]

Hmm, it's odd! I'm trying to think of stuff to try but I don't want the solution to be a workaround for Bootstrap specifically.

[markmead]

Done some more digging and cannot find a solution for this. Will add the "help wanted" label and hope it gets picked up by someone way smarter than me! 🤞

[32gits]

I'm trying to use styles="global" with Tailwind CDN and it's throwing an error in component.min.js saying Uncaught DOMException: An invalid or illegal string was specified

This is what it points to in the debugger. Not sure how helpful it is.

(()=>{function p(e,n){let l=(n.includes("global")?[...document.styleSheets]:[...document.styleSheets].filter(({title:t})=>n.includes(t))).flatMap(({cssRules:t})=>[...t]),o=new CSSStyleSheet;for(let t of l)t instanceof CSSStyleRule&&t.selectorText===":root"||o.insertRule(t.cssText);e.adoptedStyleSheets=[o]}async function u(e,n,s){function i(o){let t=document.getElementById(o),a=new DOMParser().parseFromString(t.innerHTML,"text/html").body.firstChild;return Promise.resolve(a)}let l=await i(n);s.appendChild(l),e.initTree(s)}async function h(e,n,s){let l=await(await fetch(n)).text(),o=new DOMParser().parseFromString(l,"text/html").body.firstChild;s.appendChild(o),e.initTree(s)}function d(e){class n extends HTMLElement{connectedCallback(){if(this._hasInit)return;let i=this.attachShadow({mode:"open"}),l=this.hasAttribute(":template"),o=this.hasAttribute(":url");(l||o)&&e.initTree(this);let{template:t={value:""},url:a={value:""},styles:f={value:""}}=this.attributes,c=t.value,m=a.value,r=f.value.split(",");c.length&&u(e,c,i),m.length&&h(e,m,i),r.length&&p(i,r),this._hasInit=!0}}window.customElements.get("x-component")||(customElements.define("x-component",n),new n)}document.addEventListener("alpine:init",()=>window.Alpine.plugin(d));})();

The error goes away when I switch it to a capital G styles="Global", but neither option allows the Tailwind to actually style the component.

Edit: Also tried with tailwind as a compiled local CSS file and still no effect.

[markmead]

It doesn't work with the CDN but it does work when compiled #25 #24