Is there a polyfill for the Web Components v1 spec available? I'm looking for a way to create components using customElements.define instead of document.registerElement.
As mentioned by #tony19, you can use v1 branch of webcomponentsjs. You can read about it here.
Or you can install it using bower
bower i -S webcomponentsjs#v1
If you want to polyfill only Custom Elements v1 (implementing customeElements.define) you have the choice between 2 polyfills:
document-register-element
custom-elements
If you want to polyfill the whole Web Components stack, you can use the v1 branch of the webcomponentsjs polyfill, since the current release (v0.7.23) doesn't implement yet the Custom Element and Shadow DOM "v1" Living Standards. Note that it is not merged in the master yet and subject to changes.
You can also only load the useful polyfills depending of your needs:
Custom Elements v1: see above
HTML Imports: HTMLImport.js in the current webcomponentsjs release
Shadow DOM v1: ShadyDOM, and ShadyCSS
Templates (old browsers only :) Template.js in the current webcomponentsjs release
Related
I've recently updated from angular 10 to 12.
I use SCSS.
After updating I noticed my logo is behind the content and all my z-index values have # prepended to the values and I don't know the reason why nor can't find any good information on where this change originates from or what is the cause.
Nothing changed in my config files or build pipelines except src package.json updates for packages
I also use angular material as my UI components library and have bootstrap spacing module imported additionally
I know the CSS is invalid. (after build). It's valid in design time but after build in runtime it gets hashtag prepended for whatever reason.
This was NOT the case before updates
Here's the design time
Is this some new angular feature that I'm missing here. Can't find anything relevant in docs.
Is this tied to Ivy?
Edit:
I believe this could be tied to recent sass API changes moving from #import to #use statements. ng update command should (according to docs) update and refactor scss for me but that's not the case.
Once I'm done refactoring if it fixes the issue I'll post it as answer here
Update to the latest available version of Angular. I had the same issue with 12.0.1, after ng update (12.0.5) the issue was fixed.
Check if it is inheriting the z-index from parent class. If it is then place it outside the parent class.
I'm starting a new angular project and it has been decided not to use a framework like bootstrap/bulma/materialize/... but write our own sassy component library.
I have done some research but to be honnest I don't realy know where to start (besides a css reset). I'm still a junior, have already worked on some features in a previous existing project. Now I have to start of the front end for new project and would like to build everything as structured and reusable as possible but I'm a little lost where to start.
What's your plan of action when you start writing your?
How do you structure your angular components library?
Have you ever seen a good tutorial about this that I should definitely check out as well?
From my point of view, it is not a simple task. But you can start from using SCSS which will give you a wide access to term reusability. And also you may need to work on flexbox/grid-layout (Not the case if you need to support old browsers like IE 11 and below) to implement a handful of styled components. By the combination of scss and 'flexbox`, I think most of the components can be created simply and reused in the way you want it to be.
I strongly recommend avoiding the usage of libraries and write our own code instead. Because the power we will have at the time is infinite. You will be amazed to have it.
But at the same time, if the project is a long-running project and your requirements are on the way, then I would suggest you to rethink about eliminating libraries like 'bootstrap, materialize. Otherwise, if the requirements change in time and you may need to use a number of libraries to achieve the functionalities you may need. (Experience is the best teacher)
On most of my projects to date I have not used a framework and written my own CSS library and would recommended it. I don't have any experience with Angular, only React. All I can share with you is my current setup.
I use gulp to compile SASS files into a main.css file and BEM methodology (You could also look at SMACSS). Each 'block' (defined by BEM) has a separate file in either Layout or Modules.
I separate my SASS files into the following folder:
Base - Used for - resets /Grids / helpers/ typography/ base (general base styles eg wrap)
Layout - Used for containers - header/footer/sidebar ect
Lib - used for mixins
Modules - used for components - form / button / alert / icon / accordion ect
Settings - color / font / responsive - used to set sass varibles to be used in all other files.
I hope that helps.
I think this should be possible, though dont know, I use tools like 'gulp' and 'webpack' to bundle asset files but is there any tool that extracts the necessary css classes, only that are being used, from the css files and pack them.
What you are looking for is called tree shaking, and usually it's already done in the build process with webpack,
You can install this plugin for css specific tree shaking or you can look for more info here about how it works with javascript (something similar happens in css)
In Gulp there is package called Uncss
https://github.com/ben-eb/gulp-uncss
and also an addon that is available for firefox
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
which will help you in removed unused css
Take a look into tree shaking, there are several that are for specific css.
Is there any difference between "Complete" version (In the top section close to the "Essential", "Custom" and "Sass" link) and "Customize Foundation/custom version" with "All Foundation Components"in Foundation download page?
See below images, please:
With:
I want to download the latest version of foundation 6+ completely with full components of it, but it seems there are many differences between these two versions just in LTR Languages without considering the RTL matter (for example in style of buttons and width of rows and etc).
Button style in Complete version:
and that button in Custom version:
As you can see the background-color and color (text-color) and border-radius are different, But both of them are in RTL (6.3.1) version.
Note: I compared and tested both those versions in LTR direction.
I will be grateful if anyone explain the cause of difference between those versions and explain which one of them is more complete and reliable?
Since your requirement is RTL language support you should choose either Custom Download (and select appropriate text direction) or Sass.
Custom Download gets you running quickly with just the end result JavaScript and CSS files.
Sass is the entire pipeline: build, Scss, ES6, unit tests, etc. And yes, you can configure RTL using the Sass version too. It's just a configuration change.
Also, the Sass version allows you to optionally work with latest set of changes from Zurb and the community. You know, fixes and features that have not been made into an official release.
I'm writing a Chrome extension that injects HTML into a displayed page. I want the injected HTML to have it's own style, protected from the CSS that may be present in the host page.
I've tried using conventional CSS, and still suffer from style corruption from the host page.
After watching the Polymer presentation from I/O 15, I was wondering if there are any new, Chrome-specific techniques that I can use to achieve this?
What you will want to look into is shadow-dom. This will enable you to create a widget/component (which would be your injected html). This would mean that the DOM tree for the widget/component is encapsulated and no external styles from the page will affect it. There is a good article on html5rocks covering this. You may also want to look into WebComponents. Bear in mind that this functionality is only available in the latest browser versions.
Two things that I currently use at my place of work are:
css-modules
react-css-modules
I use react at work, hence react-css-modules, but css-modules should work in your case. It's not Chrome specific, but we use them within the context of each component we build. Basically, like the docs state, a class of row would become something like table__row___2w27N. The breakdown of the built name is the filename of the CSS than the class name followed by a base64 hash of 5 char. I hope this helps.
One potential downside is Webpack would be required.
Here is an example of our component folder structure:
- component
- Component.jsx/js
- component.css/scss/sass
- component.test.js