Comments (5)
My (naive) guidance in this area is to keep-it-simple since this component is not using Shadow DOM things aren't too complex to leave in a developer's hands.
- Break the script and style into their own file.
- Instruct the developers to define the component name that they wish to use. (If you're running a build script compiling things together, you may want one class to a file without any side-effects like defining being done automatically.)
- Give good instructions on applying the component and what devs need to do.
This should in theory be the simplest distribution method possible and give implementers absolute control where they need it.
I'm working on this during my flight today, expect a PR in the next day or two (and other issues coming in as-needed for work later.)
Update: PR #3 is open for anyone who wants to follow along to see updates as they happen. Once I'm solid on everything to support what I've done the PR description and title will be updated.
from lite-youtube-embed.
@paulirish I have this blog post on how I think web components should be published: http://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/
But I also think that styles should be included in the JS so that they are installed automatically, rather than require any separate style imports, so it's not much help there.
from lite-youtube-embed.
I think bundling the styles in from the JS directly partially comes down to Shadow DOM usage. If you're using it, then it seems fine since the engine is only applying those styles within that scope anyways. However in this situation, we do not have Shadow DOM in use, so the same styles affect every instance. It makes more sense to bundle the CSS separately and pay the cost once to apply it rather than every time a component is used on a page.
from lite-youtube-embed.
Well... shadow dom should be used to encapsulate the styles to only these elements. Every browser that supports custom elements also supports shadow dom.
from lite-youtube-embed.
I'm also going back on what I told you at CDS Paul. The current norm in web components is shipping with your module defining itself. Since we are not providing this as an exported module, we should go ahead and define the custom element in the script itself. I'll get that done and clean up what needs to be done tomorrow (or tonight after I get home and nap.)
from lite-youtube-embed.
Related Issues (20)
- Failed to execute 'postMessage' HOT 2
- Type declarations
- On mobile, double click is neccesary HOT 8
- Display a title on the video thumbnail HOT 2
- Graceful degradation if YT API breaks
- NPM version is outdated HOT 1
- Custom Width and Height for Youtube shorts HOT 6
- Will it be counted as views on YouTube? HOT 2
- sometime no image loaded HOT 1
- does not work on mobile HOT 2
- Early click on Progressively Enhanced version directs user to youtube.com HOT 1
- A11Y: Why `a.lty-playbtn` instead of `button`? HOT 2
- Start and end params not working when using js-api
- I am using lite youtube embed and I want to get onStateChange player.getPlayerState():
- How can we keep the lower quality preview?
- Could we get a more noob friendly guide for Pro-usage? 😇
- Deprecated navigator.vendor HOT 1
- v0.3.2 Release HOT 1
- Yield on LiteYTEmbed click listener to reduce INP impact HOT 3
- Offering the class in ESM format
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lite-youtube-embed.