Getting Started

Minimal Setup

Installation Add the package via Composer (though note the repository is archived, so check for alternatives like html5shiv via npm or standalone assets):
```
composer require apnet/html5shiv
```
If unavailable, use a CDN or npm:
```
npm install --save html5shiv
```

Basic Usage Include the shiv in your Blade template (or asset pipeline):

<!-- Option 1: Via CDN (recommended for simplicity) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>

<!-- Option 2: If using Composer (unlikely to work due to archival) -->
<script src="{{ asset('vendor/apnet/html5shiv/dist/html5shiv.min.js') }}"></script>

First Use Case Use this in legacy projects targeting IE8/IE9 to enable HTML5 elements (e.g., <section>, <header>) via JavaScript. Example:
```

```

Implementation Patterns

Workflow Integration

Asset Pipeline

Laravel Mix: Bundle the shiv in your webpack.mix.js:

mix.copy('node_modules/html5shiv/dist/html5shiv.min.js', 'public/js');

Laravel Blade: Conditionally load in a layout:

@if (Request::is('legacy/*') || Request::userAgent()->is('IE 8.0'))
  <script src="{{ asset('js/html5shiv.min.js') }}"></script>
@endif

Dynamic Loading Use JavaScript to load the shiv only for IE:

if (/Trident|MSIE/.test(navigator.userAgent)) {
  const script = document.createElement('script');
  script.src = '{{ asset("js/html5shiv.min.js") }}';
  document.head.appendChild(script);
}

CSS Reset Pair with a CSS reset (e.g., Normalize.css) to handle quirks in older browsers:
```
<link rel="stylesheet" href="{{ asset('css/normalize.css') }}">
```

Common Patterns

Conditional Comments: Leverage IE-specific conditional comments for granular control:

<!--[if lt IE 9]>
  <script src="{{ asset('js/html5shiv.min.js') }}"></script>
  <style> .no-html5 { display: none; } </style>
<![endif]-->

Feature Detection: Use Modernizr alongside for progressive enhancement:
```
if (!Modernizr.html5shiv) {
  // Load shiv dynamically
}
```

Gotchas and Tips

Pitfalls

Archived Package
- The repository is archived, so rely on CDN or npm for updates. Avoid direct Composer installs.
- Alternative: Use html5shiv on npm or standalone builds from Google Code Archive.
IE-Specific Quirks
- IE8: May require printshiv.js for print styles (include both files).
- IE9: Often handles HTML5 elements natively, but test thoroughly.

Performance

Lazy-load the shiv to avoid blocking render:

function loadShiv() {
  const script = document.createElement('script');
  script.src = '{{ asset("js/html5shiv.min.js") }}';
  script.onload = function() { document.body.classList.add('html5shiv-loaded'); };
  document.head.appendChild(script);
}
// Load after DOM ready
document.addEventListener('DOMContentLoaded', loadShiv);

CSS Conflicts
- The shiv adds classes like .html5 to the <html> tag. Reset or override in your CSS:
```
html.html5 { margin: 0; padding: 0; } /* Example reset */
```

Debugging Tips

Verify Load Check the Network tab in DevTools to confirm the script loads only for IE.

Fallback Testing Use browserstack.com to test IE8/IE9 scenarios. Example:

# Test locally with IE via Docker
docker run -it --rm -p 8080:8080 selenium/standalone-firefox:latest

Console Warnings Suppress shiv warnings (if any) with:
```
window.html5shiv = function() { /* empty */ };
```

Extension Points

Custom Elements Extend the shiv to support custom elements (advanced):

// After loading html5shiv.min.js
document.createElement('my-custom-element');

Polyfill Integration Combine with other polyfills (e.g., classList for IE9):

<!--[if lt IE 9]>
  <script src="{{ asset('js/html5shiv.min.js') }}"></script>
  <script src="{{ asset('js/classList.min.js') }}"></script>
<![endif]-->

Server-Side Detection Use Laravel middleware to serve shiv only for IE:

// app/Http/Middleware/CheckUserAgent.php
public function handle($request, Closure $next) {
    if (Request::userAgent()->is('IE 8.0')) {
        view()->share('loadShiv', true);
    }
    return $next($request);
}

Then in Blade:

@if($loadShiv)
  <script src="{{ asset('js/html5shiv.min.js') }}"></script>
@endif

Html5Shiv Laravel Package